3.2.5 fetch()

语法如下：

fetch(resource[, options])

1. 参数

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

2. 返回值

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

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

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

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:[e-mail]/

   • 选项

     • 无效 header name 或 header value

     • 无效 mode, referrer 等

     • 相互冲突的 headers 设置

   • fetch 抛出网络错误

4. 例子

5. 主要参考

• https://fetch.spec.whatwg.org/

• https://developer.mozilla.org/en-US/docs/Web/API/fetch