詳解ES6 Fetch API HTTP請求實用指南

本次將介紹如何使用Fetch API（ES6 +）對REST API的 HTTP請求，還有一些示例提供給你們便於你們理解。 注意：全部示例均在帶有箭頭功能的 ES6中給出。 當前的Web /移動應用程序中的一種常見模式是從服務器請求或顯示某種數據（例如用戶，帖子，評論，訂閱，付款等），而後使用CRUD（建立-Create，閱讀-Retrieve，更新-Update或刪除-Delete）操做。 爲了進一步操做資源，咱們常用這些JS方法（推薦），例如 .map()， .filter()和 .reduce()。 一下就是咱們要解決的問題:

• 處理JS的異步HTTP請求
• 什麼是AJAX？
• 爲何要獲取API？
• 快速介紹Fetch API
• 獲取API - CRUD示例←好東西！

1.處理JS的異步HTTP請求

JavaScript（JS）的工做原理是最具備挑戰性的部分之一是理解如何處理異步請求，這須要理解promises和回調是如何工做的。 在大多數編程語言中，咱們都認爲操做按順序（順序）發生。必須先執行第一行才能繼續下一行。這個道理顯而易見，由於這是咱們本身就是這麼操做或者是工做的，固然你也能夠選擇邊聽歌邊寫代碼（O(∩_∩)O哈哈~）； 可是使用JS，咱們有多個在後臺/前臺運行的操做，而且咱們不能在每次等待用戶事件時都凍結一個Web應用程序。 將JavaScript描述爲異步可能會產生一些誤導。更準確地說，JavaScript是同步的，而且具備各類回調機制的單線程。 可是有些事情必須按順序發生，不然會致使流程混亂和產生意外結果。出於這個緣由，咱們可使用promises和callback來構建它。舉例：在某個操做以前須要驗證用戶憑據才能進行這個操做。

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

2.什麼是AJAX

AJAX表明異步JavaScript和XML，它容許在應用程序運行時經過與Web服務器交換數據來異步更新網頁。簡而言之，它實質上意味着您能夠更新網頁的各個部分而無需從新加載整個頁面（URL保持不變的狀況下）。 AJAX是一個誤導性的名稱。AJAX應用程序可能使用XML來傳輸數據，但將數據做爲純文本或JSON文本傳輸一樣很常見。

• w3shools.com

AJAX一路走來？ 許多開發人員對在單頁應用程序（SPA）中擁有全部特性感到很是興奮，可是這也會致使不少異步痛苦！但幸運的是，咱們有像Angular，VueJS和React這樣的庫，因此在寫SPA應用的時候會更加簡單和易用。 總的來講，如何平衡從新加載整個頁面或加載部分頁面就顯得很是重要了。 在大多數狀況下，頁面從新加載在瀏覽器日益完善的功能下已經表現的很是好了。要是在之前，頁面從新加載須要幾秒鐘（取決於服務器的位置和瀏覽器功能）。可是今天的瀏覽器很是快，因此決定是否執行AJAX或頁面從新加載的區別並不大。 我的的經驗是，在大多數狀況下，客戶不關心它是SPA仍是額外的頁面從新加載。固然，不要誤會個人意思，我確實喜歡SPA，但咱們須要考慮一些權衡，若是咱們處理有限的預算和缺少資源，那麼快速解決方案多是更好的方法。 最後，它實際上取決於用例，但我我的認爲SPA須要更多的開發時間和處理一些頭痛的問題（頁面的首次加載），而不是簡單的頁面從新加載。

3.爲何要 Fetch API？

這容許咱們對服務器執行聲明性HTTP請求。對於每一個請求，它建立一個Promise必須解決的請求才能定義內容類型並訪問數據。 如今，Fetch API的好處在於它徹底受JS生態系統的支持，而且也是MDN Mozilla文檔的一部分。最後但並不是最不重要的是，它在大多數瀏覽器（IE除外）上開箱即用。從長遠來看，我猜它將成爲調用Web API的標準方式。 注意！我很清楚其餘HTTP方法，例如使用帶有RXJS的Observable，以及它如何關注訂閱/取消訂閱等方面的內存管理/泄漏。也許這將成爲執行HTTP請求的新標準方式，誰知道呢？ 不管如何，在本文中我只關注Fetch API，但可能在未來寫一篇關於Observable和RXJS的文章。

4.快速介紹Fetch API

該fetch()方法返回一個Promise解析Response來自Request顯示狀態（成功與否）的方法。若是您promise {}在控制檯日誌屏幕中收到此消息，請不要驚慌 - 它基本上意味着Promise工做，但等待解決。所以，爲了解決它，咱們須要 .then()處理程序（回調）來訪問內容。 因此簡而言之，咱們首先定義路徑（Fetch），其次是從服務器請求數據（Request），第三個定義內容類型（Body），最後但並不是最不重要的是，咱們訪問數據（Response）。 若是你很難理解這個概念，不要慌。您將經過下面顯示的示例得到更好的概述。 咱們將用於示例的路徑 https://jsonplaceholder.typicode.com/users //返回JSON 5.獲取API - HTTP示例 若是咱們想要訪問數據，咱們須要兩個.then()處理程序（回調）。可是若是咱們想要操縱資源，咱們只須要一個 .then()處理程序。可是，咱們可使用第二個來確保已發送值。 基本提取API模板

//基於fetch的基本模塊
fetch
.then(response.something) //定義返回的類型和數據格式
.then(data) // 返回的數據

注意！以上示例僅用於說明目的。若是執行它，代碼將不起做用。

• 獲取API示例
• 顯示用戶
• 顯示用戶列表
• 建立新用戶
• 刪除用戶
• 更新用戶

注意！資源不會真正在服務器上建立，但會返回虛假結果來模仿真實服務器。

1.顯示用戶

如前所述，顯示單個用戶的過程包括兩個 .then()處理程序（回調），第一個用於定義對象，第二個用於訪問數據。 請注意，只需閱讀查詢url字符串，/users/2咱們就能理解/預測API的做用。這也是rest api 的重要意義之一 例子

fetch('https://jsonplaceholder.typicode.com/users/2')
 .then(response => response.json()) //定義返回的類型和數據格式
 .then(data => console.log(data)) // 返回的數據
// 數據示例：
// {
//   "id": 2,
//   "name": "Ervin Howell",
//   "username": "Antonette",
//   "email": "Shanna@melissa.tv",
//   "address": {
//    "street": "Victor Plains",
//    "suite": "Suite 879",
//    "city": "Wisokyburgh",
//    "zipcode": "90566-7771",
//    "geo": {
//     "lat": "-43.9509",
//     "lng": "-34.4618"
//    }
//   },
//   "phone": "010-692-6593 x09125",
//   "website": "anastasia.net",
//   "company": {
//    "name": "Deckow-Crist",
//    "catchPhrase": "Proactive didactic contingency",
//    "bs": "synergize scalable supply-chains"
//   }
// }

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

2.顯示用戶列表

該示例幾乎與前一個示例相同，只是查詢字符串是/users，而不是/users/2。

例子

fetch('https://jsonplaceholder.typicode.com/users')
 .then(response => response.json()) //定義返回的類型和數據格式
 .then(data => console.log(data)) // 返回的數據
// 數據示例：
// [
//   {
//    "id": 1,
//    "name": "Leanne Graham",
//    "username": "Bret",
//    "email": "Sincere@april.biz",
//    "address": {
//     "street": "Kulas Light",
//     "suite": "Apt. 556",
//     "city": "Gwenborough",
//     "zipcode": "92998-3874",
//     "geo": {
//      "lat": "-37.3159",
//      "lng": "81.1496"
//     }
//    },
//    "phone": "1-770-736-8031 x56442",
//    "website": "hildegard.org",
//    "company": {
//     "name": "Romaguera-Crona",
//     "catchPhrase": "Multi-layered client-server neural-net",
//     "bs": "harness real-time e-markets"
//    }
//   }
// 更多...
// ]

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

3.建立新用戶

這個看起來與前面的例子有點不一樣。若是熟悉HTTP協議，它給咱們提供了不少的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT。這些方法是簡單描述要執行的操做類型的動詞，主要用於操做服務器上的資源/數據。 不管如何，爲了使用Fetch API建立新用戶，咱們須要使用HTTP謂詞POST。但首先，咱們須要在某處定義它。幸運的是，Init咱們能夠傳遞一個可選參數，用於定義自定義設置的URL，例如方法類型，正文，憑據，標題等。

例子

fetch('https://jsonplaceholder.typicode.com/users',{
 method: 'POST',
  body: JSON.strignify({
   username: '張三',
    email: 'elonasdfk@gmail.com',
   userId: 1
  }),
  headers: { 'Content-Type': 'application/json;charset=utf-8'}
})

4.刪除用戶

爲了刪除用戶，咱們首先須要定位用戶/users/1，而後咱們定義方法類型DELETE。 例子

fetch('https://jsonplaceholder.typicode.com/users/1',{
 methods: 'DELETE'
})

5.更新用戶

HTTP謂詞PUT用於操做目標資源，若是要進行部分更改，則須要使用PATCH。

例子

fetch('https://jsonplaceholder.typicode.com/users',{
 method: 'PUT',
  body: JSON.strignify({
   username: '張三',
    email: 'elonasdfk@gmail.com',
   userId: 1
  }),
  headers: { 'Content-Type': 'application/json;charset=utf-8'}
})

結論

如今，你已基本瞭解如何使用JavaScript的Fetch API從服務器檢索或操做資源，以及如何處理promise。您可使用本文做爲如何構建CRUD操做的API請求的指南。 就我的而言，我以爲Fetch API是聲明性的，就算沒有任何技術編碼經驗，你也能夠很容易地理解發生了什麼