# 3.2.5 fetch()

语法如下：

```javascript
fetch(resource[, options])
```

## 1. 参数

注意：`fetch()` 的参数和 `Request()` 构造函数的参数相同

## 2. 返回值

返回值是可以解析为 Response 对象的 Promise。一旦 Response 可用，该 Promise 就会被 fulfilled。

`fetch()` Promise 只会在遇到网络错误（通常是存在权限问题或类似问题）时才会 reject，当遇到 HTTP 错误（比如 404）时不会 reject。所以，`then()` 处理程序必须检查 `Response.ok` 和 `Response.status` 属性。

```javascript
fetch(url)
.then((response) => {
    if (response.ok) {
        return response.json()
    }else{
        return Promise.reject(`HTTP error! Status: ${response.status}`)
    }
  })
.then(response => {})
.catch(err => {})
```

```javascript
const doAjax = async () => {
  const response = await fetch('ajax.php'); // Generate the Response object
  if (response.ok) {
    const jsonValue = await response.json(); // Get JSON value from the response body
    return Promise.resolve(jsonValue);
  } else {
    return Promise.reject('PHP file not found');
  }
}

// Call the function and output value or error message to console
doAjax().then(console.log).catch(console.log);
```

## 3. 异常

1. `AbortError`：请求被中止，由于调用了 AbortController 的 `abort()` 方法
2. 语法错误 `TypeError`，原因可能是：
   * 资源
     * 无效的 URL 或者 scheme
     * URL 包括 credentials，比如 `https://user:password@example.com/`
   * 选项
     * 无效 header name 或 header value
     * 无效 mode, referrer 等
     * 相互冲突的 headers 设置
   * fetch 抛出网络错误

## 4. 例子

## 5. 主要参考

* <https://fetch.spec.whatwg.org/>
* [https://deve](https://developer.mozilla.org/en-US/docs/Web/API/fetch)[loper.mozilla.org/en-US/docs/Web/API/fetch](https://developer.mozilla.org/en-US/docs/Web/API/fetch)