Fetch API速查表：9個最多見的API請求

對於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