有哪些最常見的API請求

本篇內(nèi)容介紹了“有哪些最常見的API請求”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

為什么要使用Fetch API?

如今，我們被所有提供漂亮的SDK的服務寵壞了，這些SDK將實際的API請求抽象化，我們只需要使用典型的語言結(jié)構(gòu)來請求數(shù)據(jù)，而不關(guān)心實際的數(shù)據(jù)交換。

但是，如果你所選擇的平臺沒有SDK怎么辦?或者如果你同時構(gòu)建服務器和客戶端呢?在這些情況下，你需要自己處理請求，這就是使用Fetch  API的方法。

發(fā)送簡單GET請求

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

發(fā)送簡單POST請求

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

使用授權(quán)令牌進行GET

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

使用查詢字符串數(shù)據(jù)進行GET

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

使用CORS進行GET

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

使用授權(quán)令牌和查詢字符串數(shù)據(jù)進行POST

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

使用表單數(shù)據(jù)進行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數(shù)據(jù)進行POST

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

使用JSON數(shù)據(jù)和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請求的結(jié)果

Fetch API返回一個Promise。這就是為什么我總是使用 .then() 和回調(diào)函數(shù)來處理響應的原因：

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

但是，如果您處于異步函數(shù)中，也可以等待結(jié)果：

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

現(xiàn)在讓我們看一下如何從響應中提取數(shù)據(jù)：

如何檢查Fetch API響應的狀態(tài)碼

發(fā)送POST，PATCH和PUT請求時，我們通常對返回狀態(tài)代碼感興趣：

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

如何獲取Fetch API響應的簡單值

某些API端點可能會發(fā)回使用您的數(shù)據(jù)創(chuàng)建的新數(shù)據(jù)庫記錄的標識符：

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

如何轉(zhuǎn)換Fetch API響應的JSON數(shù)據(jù)

但是在大多數(shù)情況下，您會在響應正文中接收JSON數(shù)據(jù)：

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

請記住，只有在兩個Promises都解決后，你才能訪問數(shù)據(jù)。這有時會讓人有點困惑，所以我總是喜歡使用async方法并等待結(jié)果。

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

“有哪些最常見的API請求”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！