網(wǎng)絡(luò)請求axios與fetch的區(qū)別及使用示例
一、axios和fetch的區(qū)別
Axios 和 Fetch 都是 JavaScript 中用于發(fā)送 HTTP 請求的 API,它們的主要區(qū)別在以下方面:
1.Axios 支持更廣泛的瀏覽器和 Node.js 版本,而 Fetch 只能在較新的瀏覽器中使用,或需要使用 polyfill 兼容舊版瀏覽器。
2.Axios 可以攔截請求和響應(yīng),可以全局配置默認的請求頭、超時時間等,而 Fetch 目前不支持這些功能。
3.Axios 默認返回 JSON 格式的數(shù)據(jù),而 Fetch 返回的是 Response 對象,需要自己通過 Response 的方法(如 json()、text() 等)將結(jié)果轉(zhuǎn)換成所需的格式。
4.Axios 對于請求錯誤可以直接拋出異常,方便進行錯誤處理,而 Fetch 的錯誤處理比較繁瑣,需要手動檢查 Response.ok 屬性。
5.fetch是原生js自帶的,axios是封裝的原生的xhr
二、axios與fetch的使用
axios的導(dǎo)入在上一篇文章
//axios發(fā)送網(wǎng)絡(luò)請求
axios.get(`https://api.github.com/search/users?q=${KeyWord}`).then(
//成功的回調(diào)
response => {
console.log("請求成功了");
},
//失敗的回調(diào)
error => {
console.log("請求失敗了");
},
)
fetch的使用:fetch不會直接返回數(shù)據(jù),而是先返回是否聯(lián)系到了服務(wù)器,
發(fā)送網(wǎng)絡(luò)請求------fetch
fetch(`https://api.github.com/search/users?q=${KeyWord}`).then(
response =>{
console.log('聯(lián)系服務(wù)器成功了');
return response.json()
},
// error => {
// console.log('聯(lián)系服務(wù)器失敗了',error);
// //返回一個初始化狀態(tài)的 Promise 中斷 .then 鏈
// return new Promise(()=>{})
// }
).then(
response =>{
console.log('獲取數(shù)據(jù)成功了',response.items);
},
// error => {console.log('獲取數(shù)據(jù)失敗了',error);}
).catch(
(error)=>{console.log(error);}
)
總體來說,Axios 比 Fetch 更易用,功能更強大。但如果只是在現(xiàn)代瀏覽器中做簡單的請求操作,F(xiàn)etch 也是一個不錯的選擇
附:fetch 和axios有哪些差異
fetch 和 axios 是兩種不同的網(wǎng)絡(luò)請求庫,它們都可以用來向服務(wù)器發(fā)送 HTTP 請求。但是它們之間有一些差異:
兼容性:fetch 是由瀏覽器提供的一種原生方法,但是并不是所有瀏覽器都支持,所以在使用 fetch 的時候需要注意兼容性問題。而 axios 是基于 XHR (XMLHttpRequest) 實現(xiàn)的,所以在使用 axios 的時候不用擔(dān)心兼容性問題。
使用方式:fetch 的使用方式比較復(fù)雜,需要通過 promise 進行鏈?zhǔn)秸{(diào)用,而且 fetch 并不能發(fā)送 PUT、DELETE、PATCH 等請求,需要通過 options 參數(shù)進行配置。axios 的
總結(jié)
到此這篇關(guān)于網(wǎng)絡(luò)請求axios與fetch的區(qū)別及使用的文章就介紹到這了,更多相關(guān)網(wǎng)絡(luò)請求axios與fetch區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實現(xiàn)Tab標(biāo)簽頁切換的最簡便方式(4種)
這篇文章主要介紹了JavaScript實現(xiàn)Tab標(biāo)簽頁切換的最簡便方式(4種),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
JS實現(xiàn)的用來對比兩個用指定分隔符分割的字符串是否相同
這篇文章主要介紹了JS實現(xiàn)的用來對比兩個用指定分隔符分割的字符串是否相同,本文代碼為特殊需要而寫,需要的朋友可以參考下2014-09-09
利用js制作html table分頁示例(js實現(xiàn)分頁)
這篇文章主要介紹了利用js制作html table的分頁示例(js實現(xiàn)分頁),需要的朋友可以參考下2014-04-04
javascript面向?qū)ο蟪绦蛟O(shè)計(一)
這篇文章主要介紹了javascript面向?qū)ο蟪绦蛟O(shè)計,分享給大家一段代碼,注釋里講解的非常詳細,有助于我們理解面向?qū)ο螅@里推薦給大家。2015-01-01

