对于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/fetch-ap...
原文：https://blog.zhangbing.site
起源：https://www.freecodecamp.org
作者：Ondrej Polesny