Fetch API是默認(rèn)Javascript用于網(wǎng)絡(luò)通訊的API鲤拿，有了Fetch API你可以不用ajax, axios等庫(kù)來(lái)做ajax請(qǐng)求了涨共，不過(guò)它用起來(lái)跟這些庫(kù)有著一些不同礁阁，需要注意评肆。
本文著重來(lái)講解如何在常見(jiàn)的情況下利用fetch api和async/await抑诸。你會(huì)了解如何獲取API數(shù)據(jù)闷祥，如何處理錯(cuò)誤和取消fetch請(qǐng)求嫌佑。
1. 什么是Fetch API
fetch API用于做HTTP請(qǐng)求强胰，例如get, post等洛二，還可以用于上傳和下載文件馋劈。開(kāi)始請(qǐng)求用fetch這個(gè)方法：
const response = await fetch(resource[, options]);
這個(gè)方法接受兩個(gè)變量，resource和options晾嘶。
resource: 一個(gè)URL字符串或者請(qǐng)求對(duì)象妓雾。
options: 設(shè)置對(duì)象如方法，headers, body 等等垒迂。
fetch()開(kāi)啟一個(gè)請(qǐng)求并返回promise對(duì)象械姻，當(dāng)請(qǐng)求完成，回應(yīng)會(huì)編程response對(duì)象机断，就是resolve, 如果請(qǐng)求失敗會(huì)變成reject楷拳。這里你需要知道promise的基本知識(shí)。
2.aync/await如何跟fetch() API配合使用
async function fetchMovies() {
const response = await fetch('/movies');
// 等待資源的回應(yīng)
console.log(response);
}
fetchMovies() 是一個(gè)異步方法吏奸，因?yàn)榍懊嬗衋sync這個(gè)關(guān)鍵詞欢揖。這里的await的意思是這個(gè)異步請(qǐng)求暫停直到請(qǐng)求完成。
讓我們來(lái)看看這個(gè)response對(duì)象奋蔚，如何把有用的信息從中提取出來(lái)她混。
這個(gè)response對(duì)象，通過(guò)await fetch()返回的是一個(gè)有著多種形態(tài)的數(shù)據(jù)泊碑，需要提取它的JSON對(duì)象坤按。
async function fetchMoviesJSON() {
const response = await fetch('/movies');
const movies = await response.json();
return movies;
}
//上面的方法返回的還是一個(gè)Promise，所以我們還要進(jìn)行進(jìn)一步的處理馒过。
fetchMoviesJSON().then(movies => {
movies;
});
response.json()方法是一個(gè)response對(duì)象上的提取JSON對(duì)象的方法臭脓，這個(gè)方法會(huì)返回一個(gè)promise對(duì)象，所以還要用await腹忽。
response對(duì)象返回了很多有用的方法來(lái)轉(zhuǎn)換這些數(shù)據(jù)来累，但都是promise對(duì)象。
response.json() 返回的是JSON對(duì)象
response.text() 返回的是純文本
response.formData() 返回的是formData()
response.blob() 返回blob(), 一個(gè)類(lèi)似文件形式的原始數(shù)據(jù)
response.arrayBuffer()() 返回的是arrayBuffer()的二進(jìn)制數(shù)據(jù)
3.處理fetch API錯(cuò)誤
當(dāng)我學(xué)習(xí)fetch()的時(shí)候留凭，它在有服務(wù)器錯(cuò)誤的時(shí)候也沒(méi)有報(bào)錯(cuò)佃扼，例如服務(wù)器的404狀態(tài)碼。
async function fetchMovies404() {
const response = await fetch('/oops');
response.ok; // => false
response.status; // => 404
const text = await response.text();
return text;
}
fetchMovies404().then(text => {
text; // => '無(wú)此頁(yè)面'
});
fetch()只有在請(qǐng)求沒(méi)有生成或者沒(méi)有響應(yīng)的時(shí)候才會(huì)reject蔼夜。這種情況通常會(huì)在網(wǎng)絡(luò)有問(wèn)題時(shí)才發(fā)生兼耀，例如沒(méi)有網(wǎng)絡(luò)，沒(méi)有服務(wù)器響應(yīng)等。
幸好response.ok會(huì)讓你區(qū)分不同的HTTP響應(yīng)狀態(tài)瘤运。這個(gè)屬性只有在狀態(tài)碼為200-299時(shí)返回true窍霞。在上一個(gè)請(qǐng)求中，response.ok是false拯坟，因?yàn)轫憫?yīng)狀態(tài)為404但金。
如果你想估計(jì)引起HTTP狀態(tài)碼的錯(cuò)誤，就要避開(kāi)200-299這個(gè)范圍郁季，用手動(dòng)的方法來(lái)啟動(dòng)這個(gè)錯(cuò)誤冷溃。
async function fetchMoviesBadStatus() {
const response = await fetch('/oops');
if (!response.ok) {
const message = `有錯(cuò)誤產(chǎn)生: ${response.status}`;
throw new Error(message);
}
const movies = await response.json();
return movies;
}
fetchMoviesBadStatus().catch(error => {
error.message; // '一個(gè)404錯(cuò)誤'
});
4. 取消fetch() API請(qǐng)求
不好的一點(diǎn)是fetch() API一旦開(kāi)始不允許取消請(qǐng)求。你需要額外的工具AbortController梦裂。
連接fetch() API和AbortController需要三步：
// 第一步：實(shí)例化AbortController
const controller = new AbortController();
// Step 2: 讓fetch知道controller.signal
fetch(..., { signal: controller.signal });
// Step 3: 用下面的方法來(lái)取消請(qǐng)求
controller.abort();
當(dāng)請(qǐng)求開(kāi)始之前似枕，創(chuàng)建一個(gè)abort controller實(shí)例:
const controller = new AbortController();
當(dāng)請(qǐng)求開(kāi)始的時(shí)候，用options變量把controller.signal傳入進(jìn)去年柠，fetch(url, { signal: controller.signal })凿歼，把signal這個(gè)屬性設(shè)置成controller.signal。
最后如果你需要取消請(qǐng)求就調(diào)用controller.abort()方法冗恨。
例如答憔，讓我們創(chuàng)建2個(gè)控制fetch請(qǐng)求的按鈕，第一個(gè)按鈕是開(kāi)始請(qǐng)求的按鈕掀抹，第二個(gè)按鈕是點(diǎn)擊之后可以取消正在進(jìn)行中的請(qǐng)求虐拓。
let controller = null;
fetchMoviesButton.addEventListener('click', async () => {
controller = new AbortController();
try {
const response = await fetch('/movies', {
signal: controller.signal
});
} catch (error) {
console.log('Fetch error: ', error);
}
controller = null;
});
cancelFetchButton.addEventListener('click', () => {
if (controller) {
controller.abort();
}
});
5. 同步多個(gè)請(qǐng)求
同步多個(gè)請(qǐng)求就是多個(gè)請(qǐng)求同時(shí)發(fā)起，只有當(dāng)全部請(qǐng)求獲得響應(yīng)時(shí)才返回響應(yīng)傲武，我們可以用promise的Promise.all() 輔助方法侯嘀。
下面我們來(lái)進(jìn)行2個(gè)接口的請(qǐng)求，分別時(shí)分類(lèi)和電影數(shù)據(jù)：
async function fetchMoviesAndCategories() {
const [moviesResponse, categoriesResponse] = await Promise.all([
fetch('/movies'),
fetch('/categories')
]);
const movies = await moviesResponse.json();
const categories = await categoriesResponse.json();
return [movies, categories];
}
fetchMoviesAndCategories().then(([movies, categories]) => {
movies; // fetched movies
categories; // fetched categories
}).catch(error => {
// 如果電影或者分類(lèi)結(jié)果無(wú)法獲取谱轨，那么就返回錯(cuò)誤
});
await Promise.all([...]) 開(kāi)始同時(shí)進(jìn)行請(qǐng)求，等待到全部獲得響應(yīng)吠谢。
如果哪個(gè)響應(yīng)失敗了土童，并行請(qǐng)求會(huì)被reject并返回請(qǐng)求的錯(cuò)誤。
如果你想把所有請(qǐng)求都完成工坊，即使有些失敗了也不管献汗，那么就用這個(gè)方法：Promise.allSettled()
