Fetch API速查表：9个最常见的API请求
来源 | https://blog.zhangbing.site/2020/11/24/fetch-api-cheatsheet/
对于Fetch API我相信你已经用过它们很多次了，但是你是否还记得语法？如果能避免在旧项目中寻找半年前使用过的特定请求的语法，岂不更好？
在本文中，我将列出9个最常见的Fetch API请求，在你忘记API的时候可以翻出来查看。
为什么要使用Fetch API？
如今，我们被所有提供漂亮的SDK的服务宠坏了，这些SDK将实际的API请求抽象化，我们只需要使用典型的语言结构来请求数据，而不关心实际的数据交换。
但是，如果你所选择的平台没有SDK怎么办？或者如果你同时构建服务器和客户端呢？在这些情况下，你需要自己处理请求，这就是使用Fetch API的方法。
使用Fetch API的简单GET请求
fetch('{url}').then(response => console.log(response));
使用Fetch API的简单POST请求
fetch('{url}', {method: 'post'}).then(response => console.log(response));
在Fetch API中使用授权令牌 (Bearer) 进行GET
fetch('{url}', {headers: {'Authorization': 'Basic {token}'}}).then(response => console.log(response));
在Fetch API中使用查询字符串数据进行GET
fetch('{url}?var1=value1&var2=value2').then(response => console.log(response));
在Fetch API中使用CORS进行GET
fetch('{url}', {mode: 'cors'}).then(response => console.log(response));
在Fetch API中使用授权令牌和查询字符串数据进行POST
fetch('{url}?var1=value1&var2=value2', {method: 'post',headers: {'Authorization': 'Bearer {token}'}}).then(response => console.log(response));
在Fetch API中使用表单数据进行POST
let formData = new FormData();formData.append('field1', 'value1');formData.append('field2', 'value2');fetch('{url}', {method: 'post',body: formData}).then(response => console.log(response));
在Fetch API中使用jsON数据进行POST
fetch('{url}', {method: 'post',headers: {'Content-Type': 'application/json'},body: JSON.stringify({'field1': 'value1','field2': 'value2'})}).then(response => console.log(response));
在Fetch API中使用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/
本文完~
评论