ES6FetchAPIHTTP請(qǐng)求的示例分析
這篇文章主要為大家展示了“ES6 Fetch API HTTP請(qǐng)求的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“ES6 Fetch API HTTP請(qǐng)求的示例分析”這篇文章吧。
創(chuàng)新新互聯(lián)，憑借十年的成都網(wǎng)站建設(shè)、網(wǎng)站制作經(jīng)驗(yàn)，本著真心·誠心服務(wù)的企業(yè)理念服務(wù)于成都中小企業(yè)設(shè)計(jì)網(wǎng)站有近1000家案例。做網(wǎng)站建設(shè)，選成都創(chuàng)新互聯(lián)。
注意：所有示例均在帶有箭頭功能的 ES6中給出。
當(dāng)前的Web /移動(dòng)應(yīng)用程序中的一種常見模式是從服務(wù)器請(qǐng)求或顯示某種數(shù)據(jù)（例如用戶，帖子，評(píng)論，訂閱，付款等），然后使用CRUD（創(chuàng)建-Create，閱讀-Retrieve，更新-Update或刪除-Delete）操作。
為了進(jìn)一步操作資源，我們經(jīng)常使用這些JS方法（推薦），例如 .map()， .filter()和 .reduce()。
一下就是我們要解決的問題:
處理JS的異步HTTP請(qǐng)求
什么是AJAX？
為什么要獲取API？
快速介紹Fetch API
獲取API - CRUD示例←好東西！
1.處理JS的異步HTTP請(qǐng)求
JavaScript（JS）的工作原理是最具有挑戰(zhàn)性的部分之一是理解如何處理異步請(qǐng)求，這需要理解promises和回調(diào)是如何工作的。
在大多數(shù)編程語言中，我們都認(rèn)為操作按順序（順序）發(fā)生。必須先執(zhí)行第一行才能繼續(xù)下一行。這個(gè)道理顯而易見，因?yàn)檫@是我們自己就是這么操作或者是工作的，當(dāng)然你也可以選擇邊聽歌邊寫代碼（O(∩_∩)O哈哈~）；
但是使用JS，我們有多個(gè)在后臺(tái)/前臺(tái)運(yùn)行的操作，并且我們不能在每次等待用戶事件時(shí)都凍結(jié)一個(gè)Web應(yīng)用程序。
將JavaScript描述為異步可能會(huì)產(chǎn)生一些誤導(dǎo)。更準(zhǔn)確地說，JavaScript是同步的，并且具有各種回調(diào)機(jī)制的單線程。
但是有些事情必須按順序發(fā)生，否則會(huì)導(dǎo)致流程混亂和產(chǎn)生意外結(jié)果。出于這個(gè)原因，我們可以使用promises和callback來構(gòu)建它。舉例：在某個(gè)操作之前需要驗(yàn)證用戶憑據(jù)才能進(jìn)行這個(gè)操作。
2.什么是AJAX
AJAX代表異步JavaScript和XML，它允許在應(yīng)用程序運(yùn)行時(shí)通過與Web服務(wù)器交換數(shù)據(jù)來異步更新網(wǎng)頁。簡(jiǎn)而言之，它實(shí)質(zhì)上意味著您可以更新網(wǎng)頁的各個(gè)部分而無需重新加載整個(gè)頁面（URL保持不變的情況下）。
AJAX是一個(gè)誤導(dǎo)性的名稱。AJAX應(yīng)用程序可能使用XML來傳輸數(shù)據(jù)，但將數(shù)據(jù)作為純文本或JSON文本傳輸同樣很常見。
- w3shools.com
AJAX一路走來？
許多開發(fā)人員對(duì)在單頁應(yīng)用程序（SPA）中擁有所有特性感到非常興奮，但是這也會(huì)導(dǎo)致很多異步痛苦！但幸運(yùn)的是，我們有像Angular，VueJS和React這樣的庫，所以在寫SPA應(yīng)用的時(shí)候會(huì)更加簡(jiǎn)單和易用。
總的來說，如何平衡重新加載整個(gè)頁面或加載部分頁面就顯得非常重要了。
在大多數(shù)情況下，頁面重新加載在瀏覽器日益完善的功能下已經(jīng)表現(xiàn)的非常好了。要是在以前，頁面重新加載需要幾秒鐘（取決于服務(wù)器的位置和瀏覽器功能）。但是今天的瀏覽器非常快，所以決定是否執(zhí)行AJAX或頁面重新加載的區(qū)別并不大。
個(gè)人的經(jīng)驗(yàn)是，在大多數(shù)情況下，客戶不關(guān)心它是SPA還是額外的頁面重新加載。當(dāng)然，不要誤會(huì)我的意思，我確實(shí)喜歡SPA，但我們需要考慮一些權(quán)衡，如果我們處理有限的預(yù)算和缺乏資源，那么快速解決方案可能是更好的方法。
最后，它實(shí)際上取決于用例，但我個(gè)人認(rèn)為SPA需要更多的開發(fā)時(shí)間和處理一些頭痛的問題（頁面的首次加載），而不是簡(jiǎn)單的頁面重新加載。
3.為什么要 Fetch API？
這允許我們對(duì)服務(wù)器執(zhí)行聲明性HTTP請(qǐng)求。對(duì)于每個(gè)請(qǐng)求，它創(chuàng)建一個(gè)Promise必須解決的請(qǐng)求才能定義內(nèi)容類型并訪問數(shù)據(jù)。
現(xiàn)在，F(xiàn)etch API的好處在于它完全受JS生態(tài)系統(tǒng)的支持，并且也是MDN Mozilla文檔的一部分。最后但并非最不重要的是，它在大多數(shù)瀏覽器（IE除外）上開箱即用。從長(zhǎng)遠(yuǎn)來看，我猜它將成為調(diào)用Web API的標(biāo)準(zhǔn)方式。
注意！我很清楚其他HTTP方法，例如使用帶有RXJS的Observable，以及它如何關(guān)注訂閱/取消訂閱等方面的內(nèi)存管理/泄漏。也許這將成為執(zhí)行HTTP請(qǐng)求的新標(biāo)準(zhǔn)方式，誰知道呢？
無論如何，在本文中我只關(guān)注Fetch API，但可能在將來寫一篇關(guān)于Observable和RXJS的文章。
4.快速介紹Fetch API
該fetch()方法返回一個(gè)Promise解析Response來自Request顯示狀態(tài)（成功與否）的方法。如果您promise {}在控制臺(tái)日志屏幕中收到此消息，請(qǐng)不要驚慌 - 它基本上意味著Promise工作，但等待解決。因此，為了解決它，我們需要 .then()處理程序（回調(diào)）來訪問內(nèi)容。
所以簡(jiǎn)而言之，我們首先定義路徑（Fetch），其次是從服務(wù)器請(qǐng)求數(shù)據(jù)（Request），第三個(gè)定義內(nèi)容類型（Body），最后但并非最不重要的是，我們?cè)L問數(shù)據(jù)（Response）。
如果你很難理解這個(gè)概念，不要慌。您將通過下面顯示的示例獲得更好的概述。
我們將用于示例的路徑
https://jsonplaceholder.typicode.com/users //返回JSON
5.獲取API - HTTP示例
如果我們想要訪問數(shù)據(jù)，我們需要兩個(gè).then()處理程序（回調(diào)）。但是如果我們想要操縱資源，我們只需要一個(gè) .then()處理程序。但是，我們可以使用第二個(gè)來確保已發(fā)送值。
基本提取API模板
//基于fetch的基本模塊 fetch .then(response.something) //定義返回的類型和數(shù)據(jù)格式 .then(data) // 返回的數(shù)據(jù)
注意！以上示例僅用于說明目的。如果執(zhí)行它，代碼將不起作用。
獲取API示例
顯示用戶
顯示用戶列表
創(chuàng)建新用戶
刪除用戶
更新用戶
注意！資源不會(huì)真正在服務(wù)器上創(chuàng)建，但會(huì)返回虛假結(jié)果來模仿真實(shí)服務(wù)器。
1.顯示用戶
如前所述，顯示單個(gè)用戶的過程包括兩個(gè) .then()處理程序（回調(diào)），第一個(gè)用于定義對(duì)象，第二個(gè)用于訪問數(shù)據(jù)。
請(qǐng)注意，只需閱讀查詢url字符串，/users/2我們就能理解/預(yù)測(cè)API的作用。這也是rest api 的重要意義之一
例子
fetch('https://jsonplaceholder.typicode.com/users/2')
.then(response => response.json()) //定義返回的類型和數(shù)據(jù)格式
.then(data => console.log(data)) // 返回的數(shù)據(jù)
// 數(shù)據(jù)示例：
// {
// "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.顯示用戶列表
該示例幾乎與前一個(gè)示例相同，只是查詢字符串是/users，而不是/users/2。
例子
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json()) //定義返回的類型和數(shù)據(jù)格式
.then(data => console.log(data)) // 返回的數(shù)據(jù)
// 數(shù)據(jù)示例：
// [
// {
// "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.創(chuàng)建新用戶
這個(gè)看起來與前面的例子有點(diǎn)不同。如果熟悉HTTP協(xié)議，它給我們提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT。這些方法是簡(jiǎn)單描述要執(zhí)行的操作類型的動(dòng)詞，主要用于操作服務(wù)器上的資源/數(shù)據(jù)。
無論如何，為了使用Fetch API創(chuàng)建新用戶，我們需要使用HTTP謂詞POST。但首先，我們需要在某處定義它。幸運(yùn)的是，Init我們可以傳遞一個(gè)可選參數(shù)，用于定義自定義設(shè)置的URL，例如方法類型，正文，憑據(jù)，標(biāo)題等。
例子
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用于操作目標(biāo)資源，如果要進(jìn)行部分更改，則需要使用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'}
})以上是“ES6 Fetch API HTTP請(qǐng)求的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享文章：ES6FetchAPIHTTP請(qǐng)求的示例分析
標(biāo)題路徑：http://jinyejixie.com/article4/jjhhoe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站營銷、響應(yīng)式網(wǎng)站、商城網(wǎng)站、ChatGPT
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
