跳到主要内容位置

​Fetch API:异步请求远程数据

Fetch API 是一种现代的 Web API,用于在浏览器中进行网络请求。它提供了一种更简单、更直观的方式来处理网络数据,比传统的 XMLHttpRequest(XHR)更加易用。

Fetch API 是基于 Promise 设计的,可以使用 async/await 语法来处理异步请求,也可以使用 then/catch 来处理回调函数。

发送 GET 请求

让我们来看一下 Fetch API 的基本使用:

fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

这里的 fetch() 函数会返回一个 Promise 对象,它会发起一个 GET 请求,并返回一个 Response 对象。我们可以通过 then() 方法来处理返回的 Response 数据,这里的 response.json() 方法会返回一个 Promise 对象,它会将 Response 转换为 JSON 格式的数据。最后,我们使用 then() 方法来处理 JSON 数据,并使用 catch() 方法来处理错误。

发送 POST 请求

我们也可以发送 POST 请求,并附带一些数据:

const data = { name: "John", age: 30 };

fetch(url, {
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))

这里我们在请求中使用了 method 参数来指定请求的方法为 POST,使用 headers 参数来指定请求头信息,使用 body 参数来附带数据。

除了 GET 和 POST 请求之外,Fetch API 还支持其他 HTTP 方法,例如 PUT、DELETE 等。

另外,Fetch API 还支持跨域请求,并且可以使用 corsno-corssame-origin 等模式来控制跨域请求的行为。

Response 对象

除了基本的请求方法之外,Fetch API 还提供了其他一些有用的功能,例如:

  • 可以使用 Response.ok 属性来检查响应是否成功(HTTP 状态码为 200-299)。
  • 可以使用 Response.status 属性来获取响应的 HTTP 状态码。
  • 可以使用 Response.headers 属性来获取响应头信息。
  • 可以使用 Response.redirected 属性来检查响应是否被重定向。

Fetch API 的使用非常简单,而且具有良好的兼容性。它可以轻松地与现代的前端框架集成,例如 Angular、React、Vue 等。

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,连载中现只需 48 元(领取优惠券)点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买