Fetch還是Axios——哪個(gè)更適合HTTP請(qǐng)求？

前端開發(fā)最重要的部分之一是通過發(fā)出HTTP請(qǐng)求與后端進(jìn)行通信，我們有幾種方法可以異步地在Javascript中進(jìn)行API調(diào)用。

幾年前，大多數(shù)應(yīng)用程序都使用Ajax發(fā)送HTTP請(qǐng)求，Ajax代表異步Javascript和XML。但是現(xiàn)在，開發(fā)人員通常會(huì)決定在 .fetch() API和Axios之間進(jìn)行選擇。

在本文中，我想比較這兩種方法，并簡(jiǎn)要介紹一下基本知識(shí)和語法。除此之外，我還將比較在兩種情況下以及在錯(cuò)誤處理中將數(shù)據(jù)轉(zhuǎn)換為JSON格式的過程。我還將討論HTTP攔截和下載進(jìn)度。

開始吧！

Fetch概述和語法

在構(gòu)建Javascript項(xiàng)目時(shí)，我們可以使用window對(duì)象，并且它帶有許多可以在項(xiàng)目中使用的出色方法。這些功能之一是Fetch API，它提供了一種簡(jiǎn)單的全局 .fetch()?方法，這是一種從API異步獲取數(shù)據(jù)的邏輯解決方案。

讓我們看一下 .fetch()?方法的語法。

fetch(url)
??.then((res)?=>?
????//?handle?response
??)
??.catch((error)?=>?{
????//?handle?error
??})

在上面的示例中，您可以看到簡(jiǎn)單的獲取GET請(qǐng)求的語法。在 .fetch()?方法中，我們有一個(gè)強(qiáng)制性參數(shù)url，它返回一個(gè)Promise，可以使用Response對(duì)象來解決。

.fetch()?方法的第二個(gè)參數(shù)是選項(xiàng)，它是可選的。如果我們不傳遞 options，請(qǐng)求總是GET，它從給定的URL下載內(nèi)容。

在選項(xiàng)參數(shù)里面，我們可以傳遞方法或頭信息，所以如果我們想使用POST方法或其他方法，我們必須使用這個(gè)可選的數(shù)組。

正如我之前提到的，Promise會(huì)返回Response對(duì)象，正因?yàn)槿绱耍覀冃枰褂昧硪粋€(gè)方法來獲取響應(yīng)的主體。有幾種不同的方法可以使用，取決于我們需要的格式：

• response.json()
• response.text()
• response.formData()
• response.blob()
• response.arrayBuffer()

fetch(url,?{
??method:?'POST',
??headers:?{
????'Content-Type':?'application/json'
??},
??body:?JSON.stringify(data)
});
??.then((response)?=>?response.json())
??.catch((error)?=>?console.log(error))

Axios概述和語法

axios.get(url)
??.then(response?=>?console.log(response));
??.catch((error)?=>?console.log(error));

• baseUrl
• params
• headers
• auth
• responseType

• data，這是實(shí)際的響應(yīng)主體
• status，調(diào)用的HTTP狀態(tài)，例如200或404
• statusText，以文本消息形式返回的HTTP狀態(tài)，例如?ok
• headers，服務(wù)器發(fā)回標(biāo)頭
• config，請(qǐng)求配置
• request，XMLHttpRequest對(duì)象

axios.post({
??'/url',?
??{?name:?'John',?age:?22},
??{?options?}
})

const?config?=?{
??url:?'http://api.com',
??method:?'POST',
??header:?{
????'Content-Type':?'application/json'
??},
??data:?{
????name:?'John',
????age:?22
??}
}
axios(config);

//?fetch
fetch('url')
??.then((response)?=>?response.json())
??.then((data)?=>?console.log(data))
??.catch((error)?=>?console.log(error))
//?axios
axios.get('url')
??.then((response)?=>?console.log(response))
??.catch((error)?=>?console.log(error))

錯(cuò)誤處理

axios.get('url')
??.then((response)?=>?console.log(response))
??.catch((error)?=>?{
????if?(error.response)?{
??????//?When?response?status?code?is?out?of?2xx?range?
??????console.log(error.response.data)
??????console.log(error.response.status)
??????console.log(error.response.headers)
????}?else?if?(error.request)?{
??????//?When?no?response?was?recieved?after?request?was?made
??????console.log(error.request)
????}?else?{
??????//?Error
??????console.log(error.message)
????}
??})

fetch('url')
??.then((response)?=>?{
????if?(!response.ok)?{
??????throw?Error(response.statusText);
????}
????return?response.json()
??})
??.then((data)?=>?console.log(data))
??.catch((error)?=>?console.log(error))

下載進(jìn)度

HTTP攔截

//?請(qǐng)求攔截
axios.interceptors.request.use((config)?=>?{
??console.log('Request?sent');
})
//?響應(yīng)攔截
axios.interceptors.response.use((response)?=>?{
??//?do?an?operation?on?response
??return?response
})
axios.get('url')
??.then((response)?=>?console.log(response))
??.catch((error)?=>?console.log(error))

總結(jié)