前言
相信大家應(yīng)該都有所了解，在這個AJAX時代，如果想進行 API 等網(wǎng)絡(luò)請求都是通過 XMLHttpRequest 或者封裝后的框架進行網(wǎng)絡(luò)請求。 現(xiàn)在產(chǎn)生的 fetch 框架簡直就是為了提供更加強大、高效的網(wǎng)絡(luò)請求而生，雖然在目前會有一點瀏覽器兼容的問題，但是當(dāng)我們進行一些異步請求時，都可以使用 fetch 進行完美的網(wǎng)絡(luò)請求。下面話不多說，來一起看看詳細的介紹吧。
先來看看各個瀏覽器對fetch的原生支持情況，可以看到支持性并不是很高，safari在10.1 之后才支持，ios更是10.3之后才支持，IE完全不支持。當(dāng)然新技術(shù)的發(fā)展總會經(jīng)歷這個過程。
Ajax請求
普通的Ajax請求，用XHR發(fā)送一個json請求一般是這樣的：
使用fetch實現(xiàn)的方式：
也可以用async/await的方式
用了await后，寫異步代碼感覺像同步代碼一樣爽。await后面可以跟Promise對象，表示等待Promise resolve()才會繼續(xù)下去執(zhí)行，如果Promise被reject()或拋出異常則會被外面的try...catch捕獲。
使用fetch
fetch的主要優(yōu)點是
語法簡潔，更加語義化
基于標(biāo)準(zhǔn)的Promise實現(xiàn)，支持async/await
同構(gòu)方便
但是也有它的不足
fetch請求默認是不帶cookie的，需要設(shè)置fetch(url, {credentials: 'include'})
服務(wù)器返回400,500這樣的錯誤碼時不會reject,只有網(wǎng)絡(luò)錯誤這些導(dǎo)致請求不能完成時，fetch才會被reject.
fetch語法：
具體參數(shù)案例：
參數(shù)說明
url
定義要獲取的資源。這可能是：一個 USVString 字符串，包含要獲取資源的 URL。一個 Request 對象。
options（可選）
一個配置項對象，包括所有對請求的設(shè)置?？蛇x的參數(shù)有：
method: 請求使用的方法，如 GET、POST。
headers: 請求的頭信息，形式為 Headers 對象或 ByteString。
body: 請求的 body 信息：可能是一個 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 對象。注意 GET 或 HEAD 方法的請求不能包含 body 信息。
mode: 請求的模式，如 cors、 no-cors 或者 same-origin。
credentials: 請求的 credentials，如 omit、same-origin 或者 include。
cache: 請求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。
response
一個 Promise，resolve 時回傳 Response 對象：
屬性：
status (number) - HTTP請求結(jié)果參數(shù)，在100–599 范圍
statusText (String) - 服務(wù)器返回的狀態(tài)報告
ok (boolean) - 如果返回200表示請求成功則為true
headers (Headers) - 返回頭部信息，下面詳細介紹
url (String) - 請求的地址
方法：
text() - 以string的形式生成請求text
json() - 生成JSON.parse(responseText)的結(jié)果
blob() - 生成一個Blob
arrayBuffer() - 生成一個ArrayBuffer
formData() - 生成格式化的數(shù)據(jù)，可用于其他的請求
其他方法：
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的信息
使用實例
結(jié)合await最終代碼
data.json文件內(nèi)容如下：
[
{"name":"張三","age":"3"},
{"name":"李萬","age":"1"},
{"name":"王二","age":"4"},
{"name":"二狗","age":"3"},
{"name":"狗蛋","age":"5"},
{"name":"牛娃","age":"7"}
]運行后結(jié)果是：
姓名：張三，年齡：3 姓名：李萬，年齡：1 姓名：王二，年齡：4 姓名：二狗，年齡：3 姓名：狗蛋，年齡：5 姓名：牛娃，年齡：7
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
