一、axios和fetch的區(qū)別

Axios 和 Fetch 都是 JavaScript 中用于發(fā)送 HTTP 請(qǐng)求的 API，它們的主要區(qū)別在以下方面：

1.Axios 支持更廣泛的瀏覽器和 Node.js 版本，而 Fetch 只能在較新的瀏覽器中使用，或需要使用 polyfill 兼容舊版瀏覽器。

2.Axios 可以攔截請(qǐng)求和響應(yīng)，可以全局配置默認(rèn)的請(qǐng)求頭、超時(shí)時(shí)間等，而 Fetch 目前不支持這些功能。

3.Axios 默認(rèn)返回 JSON 格式的數(shù)據(jù)，而 Fetch 返回的是 Response 對(duì)象，需要自己通過 Response 的方法（如 json()、text() 等）將結(jié)果轉(zhuǎn)換成所需的格式。

4.Axios 對(duì)于請(qǐng)求錯(cuò)誤可以直接拋出異常，方便進(jìn)行錯(cuò)誤處理，而 Fetch 的錯(cuò)誤處理比較繁瑣，需要手動(dòng)檢查 Response.ok 屬性。

5.fetch是原生js自帶的，axios是封裝的原生的xhr

二、axios與fetch的使用

axios的導(dǎo)入在上一篇文章

 //axios發(fā)送網(wǎng)絡(luò)請(qǐng)求
        axios.get(`https://api.github.com/search/users?q=${KeyWord}`).then(
        	//成功的回調(diào)
            response => {
             	 console.log("請(qǐng)求成功了");
            },
            //失敗的回調(diào)
            error => {
                 console.log("請(qǐng)求失敗了");
            },
            
        )

fetch的使用：fetch不會(huì)直接返回?cái)?shù)據(jù)，而是先返回是否聯(lián)系到了服務(wù)器， 

發(fā)送網(wǎng)絡(luò)請(qǐng)求------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);
            //     //返回一個(gè)初始化狀態(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 更易用，功能更強(qiáng)大。但如果只是在現(xiàn)代瀏覽器中做簡(jiǎn)單的請(qǐng)求操作，F(xiàn)etch 也是一個(gè)不錯(cuò)的選擇

附：fetch 和axios有哪些差異

fetch 和 axios 是兩種不同的網(wǎng)絡(luò)請(qǐng)求庫，它們都可以用來向服務(wù)器發(fā)送 HTTP 請(qǐng)求。但是它們之間有一些差異：

• 兼容性：fetch 是由瀏覽器提供的一種原生方法，但是并不是所有瀏覽器都支持，所以在使用 fetch 的時(shí)候需要注意兼容性問題。而 axios 是基于 XHR (XMLHttpRequest) 實(shí)現(xiàn)的，所以在使用 axios 的時(shí)候不用擔(dān)心兼容性問題。

• 使用方式：fetch 的使用方式比較復(fù)雜，需要通過 promise 進(jìn)行鏈?zhǔn)秸{(diào)用，而且 fetch 并不能發(fā)送 PUT、DELETE、PATCH 等請(qǐng)求，需要通過 options 參數(shù)進(jìn)行配置。axios 的

總結(jié)

到此這篇關(guān)于網(wǎng)絡(luò)請(qǐng)求axios與fetch的區(qū)別及使用的文章就介紹到這了,更多相關(guān)網(wǎng)絡(luò)請(qǐng)求axios與fetch區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論