你的系统经常会通过与其它服务器通信来获取信息。

比如说,一个新用户想要在你的网站注册一个账号,比起手动地填写个人信息表单,他们更希望使用其它服务或平台(即第三方认证)上已经保存的信息来注册。

这样,你的系统需要和第三方系统通信来获取用户信息。这将通过 API 调用来完成。

API(Application Programming Interface,应用程序接口),就是一组定义软件或系统之间如何通信的规则。

IMG_20210530_115853

我手绘的 API 示意图

在异步编程语言(如 Javascript)编写的单页应用中,有一个很有用的工具可以实现这个功能:fetch()

什么是 Fetch API?

fetch() 是一种可以发起 AJAX(异步 JavaScript 和 XML)请求的机制。

异步意味着你可以使用 fetch 调用外部 API 而不会阻塞其它指令的执行。这样,即使 API 调用还没有完成,其它函数也可以继续执行。

API 返回响应(数据)的时候,会接着执行异步任务(fetch)。如果还是难以理解的话,可以查看我的这篇文章,其中详细介绍了异步代码的概念。

然而,需要注意的是,fetch 并不是 JavaScript 规范的一部分,所以不能在 Node.js 环境中使用它(除非安装了相应模块)。

如何在 JavaScript 中使用 fetch()

谈到 API,就需要谈到端点(endpoint),端点是一个唯一的 URL,可以通过调用它来与其它系统交互。

假设我们要请求一个外部 API 来获取一些数据(如博客)。这里我们使用 GET 请求。

以端点 URL 作为参数,调用 fetch()

fetch('https://ubahthebuilder.tech/posts/1');
从外部 API 获取博客内容

这个端点的响应体是一篇博客的信息:

{
userId: 1,
id: 1,
title: 'A post by Kingsley',
body: 'Brilliant post on fetch...',
};

我们的最终目的是要获取响应体,但是除了响应体之外,响应对象还包含很多其它信息,包括状态码、响应头等。

注意,fetch API 返回一个 promise。因此,需要使用 then() 函数来处理决议(resolution)。点击此处了解更多关于 promise 的内容。

fetch API 返回的数据通常不是可用的格式,所以需要把它转换为 JavaScript 代码方便操作的格式。幸好,可以使用 json() 方法来做:

fetch('https://ubahthebuilder.tech/posts/1')
.then(data => {
return data.json();
})
.then(post => {
console.log(post.title);
});
从 API 获取博客信息,取出博客标题

如上方代码所示,可以在后续的 then() 方法中解析数据(例中我只取出了标题)。

这个示例中,我们只是从 API 中获取了一篇博客,如果我们想要发布一篇博客呢?

如何发起 POST 请求

跳出 GET 请求,要发起 POST 请求还需要设置一些选项参数。到目前为止,只为 fetch() 提供了一个参数——URL 端点。

对于 post 请求,需要传入一个选项配置对象作为第二个参数。这个对象中可以包含许多参数,示例中只包含了一些必要信息。

由于要发送 POST 请求,所以需要声明请求方法是 POST。

还需要传入一些博客信息来创建一个新博客。因为发送的是 JSON 格式的数据,所以需要在请求头中将 Content-Type set 设置为 application/json。最后,设置请求体,它是一个 JSON 字符串。

const update = {
title: 'A blog post by Kingsley',
body: 'Brilliant post on fetch API',
userId: 1,
};

const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(update),
};

调用 API:

fetch('https://jsonplaceholder.typicode.com/posts', options)
  .then(data => {
      if (!data.ok) {
        throw Error(data.status);
       }
       return data.json();
      }).then(update => {
      console.log(update);
      // {
      //
      // title: 'A blog post by Kingsley',
      //
      // body: 'Brilliant post on fetch API',
      //
      // userId: 1,
      //
      // id: 101
      // };
      }).catch(e => {
      console.log(e);
      });

如果请求成功,会得到一个响应,其中包含了刚刚创建的博客信息。响应的具体内容取决于 API 的实现方式。

最后要注意的是,随着时间的推移,端点可能会改变、API 也可能会重构,所以应该把所有 fetch 调用放在一起以便于后续调整。

总结

本文要点如下:

  • 计算机系统、软件通过 API 来互相通信。
  • API 包含了系统之间交互的规则集和协议。例如,Facebook 可能会调用 Google 的 API 来获取用户信息。
  • 在前端 JavaScript 代码中,可以使用 fetch 来调用 API。
  • 使用 fetch 发起 GET 请求,只需要传入一个 URL 端点作为参数。
  • 要发起 POST 请求,还需传入配置对象作为参数。

如果你喜欢我的文章,可以为我买一杯咖啡以示支持。

谢谢阅读!

原文:Fetch API – How to Make a GET Request and POST Request in JavaScript,作者:Kingsley Ubah