js fetch异步请求使用实例详解

下面是关于“js fetch异步请求使用实例详解”的完整攻略。

什么是fetch？

Fetch 是一个基于 Promise 的 HTTP 请求 API，它是一种用于网络资源获取的新标准。

相对 XMLHttpRequest（XHR），它提供了更加简洁易用的接口，同时还支持更多的功能，如请求取消、跨域请求等。

fetch 最基本的使用方式

fetch 最简单的用法是向指定 URL 发送 GET 请求，并对结果进行处理。

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

这里我们向 http://example.com/movies.json 发送 GET 请求，得到一个 Response 对象，然后通过 response.json() 方法去解析响应体，并将解析后的数据打印出来。

如果请求出错，我们可以通过 .catch 方法去处理错误。

POST 请求示例

下面是一个向指定 URL 发送 POST 请求的示例：

// 请求参数对象
const data = {
  name: 'jack',
  age: 20
};

fetch('http://example.com/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

在向 http://example.com/user 发送请求时，我们需要明确请求方法是 POST，并且在请求头中设置请求体类型为 application/json。同时我们把请求参数对象转为 JSON 字符串，放到请求体中。

跨域请求

当我们向其他域名的地址使用 fetch 请求时，可能会受到同源策略的限制，因此我们需要设置跨域请求的配置。

可以在 fetch() 函数的第二个参数中指定相关配置，如下：

fetch('http://example.com/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data),
  mode: 'cors'          // 配置跨域请求
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

在 mode 中指定 cors，表示要使用跨域请求。

总结

上述是 fetch 的一些基本用法和示例，包括发送 GET/POST 请求以及设置跨域请求等。我们可以根据实际需求设置相关的请求头、请求体和选项，通过 Promise 的方式进行链式操作，最终获取到请求的结果。

fetch API 虽然更简洁易用，但也有一些代码层面上的问题，如在某些浏览器上缺少对 catch() 的支持，使用起来需要谨慎。