Fetch API速查表：9个最常见的API请求

对于Fetch API我相信你已经用过它们很多次了，速查但是最常你是否还记得语法?如果能避免在旧项目中寻找半年前使用过的特定请求的语法，岂不更好?请求

在本文中，我将列出9个最常见的速查Fetch API请求，在你忘记API的最常时候可以翻出来查看。

为什么要使用Fetch API?请求

如今，我们被所有提供漂亮的速查SDK的服务宠坏了，这些SDK将实际的最常API请求抽象化，我们只需要使用典型的请求语言结构来请求数据，而不关心实际的速查数据交换。

但是最常，站群服务器如果你所选择的请求平台没有SDK怎么办?或者如果你同时构建服务器和客户端呢?在这些情况下，你需要自己处理请求，速查这就是最常使用Fetch API的方法。

发送简单GET请求

fetch({ url}).then(response => console.log(response)); 

发送简单POST请求

fetch({ url},请求 {    method: post }).then(response => console.log(response)); 

使用授权令牌进行GET

fetch({ url}, {    headers: {      Authorization: Basic { token}   } }).then(response => console.log(response)); 

使用查询字符串数据进行GET

fetch({ url}?var1=value1&var2=value2)     .then(response => console.log(response)); 

使用CORS进行GET

fetch({ url}, {    mode: cors }).then(response => console.log(response)); 

使用授权令牌和查询字符串数据进行POST

fetch({ url}?var1=value1&var2=value2, {    method: post,   headers: {      Authorization: Bearer { token}   } }).then(response => console.log(response)); 

使用表单数据进行POST

let formData = new FormData(); formData.append(field1, value1); formData.append(field2, value2); fetch({ url}, {    method: post,   body: formData }).then(response => console.log(response)); 

使用JSON数据进行POST

fetch({ url}, {    method: post,   headers: {      Content-Type: application/json   },   body: JSON.stringify({      field1: value1,     field2: value2   }) }) .then(response => console.log(response)); 

使用JSON数据和CORS进行POST

fetch({ url}, {    method: post,   mode: cors,   headers: {      Content-Type: application/json   },   body: JSON.stringify({      field1: value1,     field2: value2   }) }) .then(response => console.log(response)); 

如何处理Fetch API请求的结果

Fetch API返回一个Promise。这就是为什么我总是使用 .then() 和回调函数来处理响应的原因：

fetch(...).then(response => {     // process the response } 

但是，如果您处于异步函数中，也可以等待结果：

async function getData(){    let data = await fetch(...);    // process the response } 

现在让我们看一下如何从响应中提取数据：

如何检查Fetch API响应的状态码

发送POST，PATCH和PUT请求时，我们通常对返回状态代码感兴趣：

fetch(...).then(response => {    if (response.status == 200){      // all OK   } else {      console.log(response.statusText);   } }); 

如何获取Fetch API响应的简单值

某些API端点可能会发回使用您的数据创建的新数据库记录的标识符：

var userId; fetch(...)     .then(response => response.text())     .then(id => {          userId = id;         console.log(userId)     }); 

如何转换Fetch API响应的服务器租用JSON数据

但是在大多数情况下，您会在响应正文中接收JSON数据：

var dataObj; fetch(...)     .then(response => response.json())     .then(data => {          dataObj = data;         console.log(dataObj)     }); 

请记住，只有在两个Promises都解决后，你才能访问数据。这有时会让人有点困惑，所以我总是喜欢使用async方法并等待结果。

async function getData(){      var dataObj;     const response = await fetch(...);     const data = await response.json();     dataObj = data;     console.log(dataObj); } 

总结

这些示例应该涵盖了大多数情况。

我是否错过了什么，一个你每天都在使用的请求?或者是其他你正在苦恼的事情?请在评论区上告诉我。

最后，你也可以以可打印的形式获得这份备忘单：https://ondrabus.com/fetch-api-cheatsheet

原文：https://www.freecodecamp.org/news/fetch-api-cheatsheet/

作者：Ondrej Polesny

本文转载自微信公众号「 前端全栈开发者」，可以通过以下二维码关注。转载本文请联系 前端全栈开发者公众号。

很赞哦!（681）