首頁 > web前端 > js教程 > 主體

$.ajax、 axios 、fetch是什麼?詳解fetch的使用方法

青灯夜游
發布: 2018-10-17 15:04:49
轉載
2535 人瀏覽過

這篇文章就跟大家介紹$.ajax、 axios 、fetch分別是什麼,是大家可以詳細了解fetch的使用方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

  • Ajax 是什麼?

答案:Ajax是一種可以在瀏覽器和伺服器之間使用非同步資料傳輸(HTTP請求)的技術。使用它可以讓頁面請求少量的數據,而不用刷新整個頁面。而傳統的頁面(不使用Ajax)要刷新部分內容,必須重載整個網頁頁面。

  • Ajax 基於什麼?

答案:它是基於的是XMLHttpRequest(XHR)。這是一個比較粗糙的API,不符合關注分離的設計原則(Separation of Concerns),配置和使用都不是那麼友善。

  • $.ajax 的產生背景?

答:基於上面的原因,各種ajax函式庫引用而生,然而最有名的就是jQuery的API中的 $.ajax()$.ajax() 它的一個優勢非同步操作,但jQuery的非同步操作是基於事件的非同步模型,沒有promise那麼友善。

  • fetch 產生的背景?

答:綜合上面所講的各種因素,fetch這個api應運而生。但好用歸好用,它存在著一些問題(這個問題下面詳講,並講解相對應的解決方案),再加上兼容性問題(ie壓根不支持),所以很多開發者使用了axios這個第三方庫。

  • 支援promise的函式庫(axios)?

答案:axios 這個函式庫現在是比較通用的產業解決方案,axios 流行開來的一個原因是promise,另一個原因是基於資料操作的函式庫的流行(vue.js, angular.js, react.js等),而傳統的jQuery是基於dom操作的函式庫。但它也存在著缺陷,就是我們使用前,要確保這個函式庫已經被引進。

其實,就我個人而言,我還是比較喜歡用 fetch 的。在開發上遇到相容性的問題,只需要同構fetch即可,而不需要額外的引進一個函式庫。下面就重點說fetch。

fetch 的使用

fetch(url, options)
    .then(response => console.log(responese))
    .catch(err => console.log(err))
登入後複製

url:存取位址
options:常用設定參數
response: 要求回傳物件

請求參數設定 詳情可參考MDN fetch

fetch存在的問題及解決方案

  1. #得到資料你需要兩個步驟

fetch('https://api.github.com/users/lvzhenbang/repos')
    .then(res => {
        console.log(res)
        return res.text()
    }).then(data => {
        console.log(data)
    })
登入後複製

透過上面的程式碼,可以發現直接列印回傳的Response 物件中壓根就沒有數據,要想取得到所需的數據,必須經過一個中間的方法response.text() (fetch提供了5中方法)

而反觀axios 使用起來就要方便的多,它返回的Response 物件中卻有數據,在data 屬性內。參考程式碼如下:

axios.get('https://api.github.com/users/lvzhenbang/repos')
    .then(res => console.log(res));
登入後複製

當然,這也不算是一個大問題,就是使用略顯麻煩了點。

  1. fetch的請求預設是不帶cookie

#解決這個問題,需要在options 中配置{credentials: 'include'}

  1. #並非所有的請求錯誤都會reject

也就是說catch 方法並不能捕捉所有的錯誤,當錯誤可以用一個狀態碼(如:404,500等)的形式表示時,

fetch

傳回的

Promise

不會擁有reject,只有當網路故障或要求被封鎖時catch 才有效。 解決這個問題,我們可判斷Response 物件中的ok 是否為true,如果不是,用

Promise

手動新增一個

reject

即可。參考程式碼如下:

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        if (res.ok) {
            return res.text()
        } else {
            return Promise.reject('请求失败')
        }
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })
登入後複製

如果不手動新增

reject### 將列印出###undefined###,而這並不是我們想要的,當然使用###axios## # 則不需要考慮這個問題,程式碼如下:###
axios.get('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => console.log(res))
    .catch(err => console.log(err));
登入後複製
###fetch 的最佳化#######由於###res.text()### 方法回傳的就是一個###promise## # ,所以可以直接呼叫###.then### ;此外為了保證所有的錯誤都會回傳一個統一的格式(都回傳一個###Promise###),上面的程式碼可以最佳化如下:###
fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        return res.text()
            .then(data => {
                if (res.ok) {
                    return data
                } elese {
                    return Promise.reject(json)
                }
            })
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })
登入後複製
###玩過express/koa的同學,或是對後端有一定了解的同學都知道,伺服器在某些情況下也會回傳一些提示訊息,那麼該如何處理呢?常見的錯誤提示包含一個狀態碼(status)和提示訊息(msg),程式碼修改如下:######server:###
res.status(404).send({
    err: 'not found'
})
登入後複製
###client:###
fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(handleResponse).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

function handleResponse (res) { 
    return Promise.reject(Object.assign({}, res.text(), {
        status: res.status,
        msg: res.statusText
    }))
}
登入後複製

兼容解决方案

以上问题解决并优化fetch的使用后,发现fetch还是一个不错的选择。针对不同使用情况可以作如下处理:

首先,要引入 es5-shim 解决fetch这个新特性的同构;

其次,要引入 es6-promise 解决promise的兼容问题;

然后,引入 fetch-ie8 解决fech的同构问题;

最后,引入 fetch-jsonp 解决跨域问题。

当然,你也不需要针对性的解决这些问题,GitHub团队提供了一个polyfill解决方案,你不需要一步步的是实现。只需要两步:

  1. 安装 fetch package

    npm install whatwg-fetch --save

  2. 在使用的模块引入 fetch

import 'whatwg-fetch'

window.fetch(url, options)
登入後複製

其他的使用和 fetch 则这个原生的API雷同。

哪些情况可以放弃使用fetch

  1. 获取Promsie的状态,如:isRejected, isResolved

  2. 如果使用习惯了jquery的progress方法的,或者使用deffered的一些方法

具体 fetch 实现了哪些与jquery类似的方法可参考whatwg-ftch 或者 fetch-issue


以上是$.ajax、 axios 、fetch是什麼?詳解fetch的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!