Fetch API HTTP請求實用指南

前端技術小哥發表於2018-11-14
APIHTTP

本次將介紹如何使用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來構建它。舉例：在某個操作之前需要驗證使用者憑據才能進行這個操作。

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()處理程式。但是，我們可以使用第二個來確保已傳送值。 第一個response它只是一個 HTTP 響應，而不是真的JSON。為了獲取JSON的內容，我們可以使用json()方法，除了 resonance.json()還有resonance.text() 等等；詳情請看 mozilla官方文件
基本提取API模板

//基於fetch的基本模組
fetch
.then(response.something) //定義返回的型別和資料格式 resonance.json()
.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"
//     }
// }

複製程式碼

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"
//       }
//     }
// 更多...
// ]
複製程式碼

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是宣告性的，就算沒有任何技術編碼經驗，你也可以很容易地理解發生了什麼。

如果有啥問題在評論處分享你的想法。

相關文章