網(wǎng)絡(luò)請求axios與fetch的區(qū)別及使用示例
一、axios和fetch的區(qū)別
Axios 和 Fetch 都是 JavaScript 中用于發(fā)送 HTTP 請求的 API,它們的主要區(qū)別在以下方面:
1.Axios 支持更廣泛的瀏覽器和 Node.js 版本,而 Fetch 只能在較新的瀏覽器中使用,或需要使用 polyfill 兼容舊版瀏覽器。
2.Axios 可以攔截請求和響應,可以全局配置默認的請求頭、超時時間等,而 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的導入在上一篇文章
//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 的時候不用擔心兼容性問題。
使用方式:fetch 的使用方式比較復雜,需要通過 promise 進行鏈式調(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)文章
GreyBox技術(shù)總結(jié)(轉(zhuǎn))
GreyBox是一個遮罩層的組件也稱模式窗口或模態(tài)窗口(所謂模態(tài)窗口,就是指除非采取有效的關(guān)閉手段,用戶的鼠標焦點或者輸入光標將一直停留在其上的窗口),它運行以后可以產(chǎn)生不錯的界面。2010-11-11JavaScript實現(xiàn)選中文字提示新浪微博分享效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)選中文字提示新浪微博分享效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06JavaScript返回網(wǎng)頁中錨點數(shù)目的方法
這篇文章主要介紹了JavaScript返回網(wǎng)頁中錨點數(shù)目的方法,涉及javascript使用document.anchors獲取錨點數(shù)目的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04