JavaScript利用fetch實(shí)現(xiàn)異步請(qǐng)求的方法實(shí)例

前言

相信大家應(yīng)該都有所了解，在這個(gè)AJAX時(shí)代，如果想進(jìn)行 API 等網(wǎng)絡(luò)請(qǐng)求都是通過(guò) XMLHttpRequest 或者封裝后的框架進(jìn)行網(wǎng)絡(luò)請(qǐng)求。 現(xiàn)在產(chǎn)生的 fetch 框架簡(jiǎn)直就是為了提供更加強(qiáng)大、高效的網(wǎng)絡(luò)請(qǐng)求而生，雖然在目前會(huì)有一點(diǎn)瀏覽器兼容的問(wèn)題，但是當(dāng)我們進(jìn)行一些異步請(qǐng)求時(shí)，都可以使用 fetch 進(jìn)行完美的網(wǎng)絡(luò)請(qǐng)求。下面話不多說(shuō)，來(lái)一起看看詳細(xì)的介紹吧。

先來(lái)看看各個(gè)瀏覽器對(duì)fetch的原生支持情況，可以看到支持性并不是很高，safari在10.1 之后才支持，ios更是10.3之后才支持，IE完全不支持。當(dāng)然新技術(shù)的發(fā)展總會(huì)經(jīng)歷這個(gè)過(guò)程。

Ajax請(qǐng)求

普通的Ajax請(qǐng)求，用XHR發(fā)送一個(gè)json請(qǐng)求一般是這樣的：

var xhr = new XMLHttpRequest(); 
xhr.open("GET", url); 
xhr.responseType = 'json'; 
xhr.onload = function(){ 
 console.log(xhr.response); 
}; 
xhr.onerror = function(){ 
 console.log("error") 
} 
xhr.send();

使用fetch實(shí)現(xiàn)的方式：

fetch(url).then(function(response){ 
 return response.json(); 
}).then(function(data){ 
 console.log(data) 
}).catch(function(e){ 
 console.log("error") 
}) 

也可以用async/await的方式

try{ 
 let response = await fetch(url); 
 let data = await response.json(); 
 console.log(data); 
} catch(e){ 
 console.log("error") 
}

用了await后，寫異步代碼感覺(jué)像同步代碼一樣爽。await后面可以跟Promise對(duì)象，表示等待Promise resolve()才會(huì)繼續(xù)下去執(zhí)行，如果Promise被reject()或拋出異常則會(huì)被外面的try...catch捕獲。

使用fetch

fetch的主要優(yōu)點(diǎn)是

• 語(yǔ)法簡(jiǎn)潔，更加語(yǔ)義化
• 基于標(biāo)準(zhǔn)的Promise實(shí)現(xiàn)，支持async/await
• 同構(gòu)方便

但是也有它的不足

• fetch請(qǐng)求默認(rèn)是不帶cookie的，需要設(shè)置fetch(url, {credentials: 'include'})
• 服務(wù)器返回400,500這樣的錯(cuò)誤碼時(shí)不會(huì)reject,只有網(wǎng)絡(luò)錯(cuò)誤這些導(dǎo)致請(qǐng)求不能完成時(shí)，fetch才會(huì)被reject.

fetch語(yǔ)法：

fetch(url, options).then(function(response) { 
 // handle HTTP response 
}, function(error) { 
 // handle network error 
})

具體參數(shù)案例：

//兼容包 
require('babel-polyfill') 
require('es6-promise').polyfill() 
 
import 'whatwg-fetch' 
 
fetch(url, { 
 method: "POST", 
 body: JSON.stringify(data), 
 headers: { 
 "Content-Type": "application/json" 
 }, 
 credentials: "same-origin" 
}).then(function(response) { 
 response.status //=> number 100–599 
 response.statusText //=> String 
 response.headers //=> Headers 
 response.url //=> String 
 
 response.text().then(function(responseText) { ... }) 
}, function(error) { 
 error.message //=> String 
})

參數(shù)說(shuō)明

url

定義要獲取的資源。這可能是：一個(gè) USVString 字符串，包含要獲取資源的 URL。一個(gè) Request 對(duì)象。

options（可選）

一個(gè)配置項(xiàng)對(duì)象，包括所有對(duì)請(qǐng)求的設(shè)置?？蛇x的參數(shù)有：

• method: 請(qǐng)求使用的方法，如 GET、POST。
• headers: 請(qǐng)求的頭信息，形式為 Headers 對(duì)象或 ByteString。
• body: 請(qǐng)求的 body 信息：可能是一個(gè) Blob、BufferSource、FormData、URLSearchParams 或者 USVString 對(duì)象。注意 GET 或 HEAD 方法的請(qǐng)求不能包含 body 信息。
• mode: 請(qǐng)求的模式，如 cors、 no-cors 或者 same-origin。
• credentials: 請(qǐng)求的 credentials，如 omit、same-origin 或者 include。
• cache: 請(qǐng)求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。

response

一個(gè) Promise，resolve 時(shí)回傳 Response 對(duì)象：

屬性：

• status (number) - HTTP請(qǐng)求結(jié)果參數(shù)，在100–599 范圍
• statusText (String) - 服務(wù)器返回的狀態(tài)報(bào)告
• ok (boolean) - 如果返回200表示請(qǐng)求成功則為true
• headers (Headers) - 返回頭部信息，下面詳細(xì)介紹
• url (String) - 請(qǐng)求的地址

方法：

• text() - 以string的形式生成請(qǐng)求text
• json() - 生成JSON.parse(responseText)的結(jié)果
• blob() - 生成一個(gè)Blob
• arrayBuffer() - 生成一個(gè)ArrayBuffer
• formData() - 生成格式化的數(shù)據(jù)，可用于其他的請(qǐng)求

其他方法：

• clone()
• Response.error()
• Response.redirect()
• response.headers
• has(name) (boolean) - 判斷是否存在該信息頭
• get(name) (String) - 獲取信息頭的數(shù)據(jù)
• getAll(name) (Array) - 獲取所有頭部數(shù)據(jù)
• set(name, value) - 設(shè)置信息頭的參數(shù)
• append(name, value) - 添加header的內(nèi)容
• delete(name) - 刪除header的信息
• forEach(function(value, name){ ... }, [thisContext]) - 循環(huán)讀取header的信息

使用實(shí)例

//獲取css里ul的id屬性 
let uldom = document.getElementById("students"); 
//單獨(dú)創(chuàng)建一個(gè)json文件，獲取地址 
let url = "data.json"; 
 
function main(){ 
 fetch(url).then(respone=>{ 
 return respone.json(); 
 }).then(students=>{ 
 
 let html = ``; 
 for(let i=0, l=students.length; i<l; i++){ 
  let name = students[i].name; 
  let age = students[i].age; 
  html += ` 
  <li>姓名：${name}，年齡：${age}</li> 
  ` 
 } 
 
 uldom.innerHTML = html; 
 }); 
} 
 
main();

結(jié)合await最終代碼

let uldom　=　document.getElementById("students"); 
let url　=　"data.json"; 
 
async function main(){ 
 let respone = await fetch(url); 
 let students = await respone.json(); 
 
let html　=``; 
for(let i=0, l=students.length; i<l; i++){ 
 let name　=　students[i].name; 
 let age　=　students[i].age; 
 html　+= ` 
 <li>姓名：${name}，年齡：${age}</li> 
` 
} 
uldom.innerHTML　=　html; 
} 
main();

data.json文件內(nèi)容如下：

[ 
 {"name":"張三","age":"3"}, 
 {"name":"李萬(wàn)","age":"1"}, 
 {"name":"王二","age":"4"}, 
 {"name":"二狗","age":"3"}, 
 {"name":"狗蛋","age":"5"}, 
 {"name":"牛娃","age":"7"} 
]

運(yùn)行后結(jié)果是：

姓名：張三，年齡：3 
姓名：李萬(wàn)，年齡：1 
姓名：王二，年齡：4 
姓名：二狗，年齡：3 
姓名：狗蛋，年齡：5 
姓名：牛娃，年齡：7

源碼下載

下載地址：http://xiazai.jb51.net/201707/yuanma/js-fetch(jb51.net).rar

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)億速云的支持。