從ajax到fetch、axios

時間 2019-11-07

標籤 ajax fetch axios 欄目 Ajax 简体版

原文原文鏈接

前端是個發展迅速的領域，前端請求天然也發展迅速，從原生的XHR到jquery ajax，再到如今的axios和fetch。前端

jquery ajax

$.ajax({
    type: 'POST',
    url: url,
    data: data,
    dataType: dataType,
    success: function() {},
    error: function() {}
})
複製代碼

它是對原生XHR的封裝，還支持JSONP，很是方便；真的是用過的都說好。可是隨着react，vue等前端框架的興起，jquery早已不復當年之勇。不少狀況下咱們只須要使用ajax，可是卻須要引入整個jquery，這很是的不合理，因而便有了fetch的解決方案。vue

fetch

fetch號稱是ajax的替代品，它的API是基於Promise設計的，舊版本的瀏覽器不支持Promise，須要使用polyfill es6-promisenode

舉個例子：react

// 原生XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)   // 從服務器獲取數據
    }
}
xhr.send()
// fetch
fetch(url)
    .then(response => {
        if (response.ok) {
            return response.json();
        }
    })
    .then(data => console.log(data))
    .catch(err => console.log(err))
複製代碼

看起來好像是方便點，then鏈就像以前熟悉的callback。jquery

在MDN上，講到它跟jquery ajax的區別，這也是fetch很奇怪的地方：ios

當接收到一個表明錯誤的 HTTP 狀態碼時，從 fetch()返回的 Promise 不會被標記爲 reject，即便該 HTTP 響應的狀態碼是 404 或 500。相反，它會將 Promise 狀態標記爲 resolve （可是會將 resolve 的返回值的 ok 屬性設置爲 false ），僅當網絡故障時或請求被阻止時，纔會標記爲 reject。默認狀況下, fetch 不會從服務端發送或接收任何 cookies, 若是站點依賴於用戶 session，則會致使未經認證的請求（要發送 cookies，必須設置 credentials 選項）.es6

忽然感受這還不如jquery ajax好用呢？別急，再搭配上async/await將會讓咱們的異步代碼更加優雅：ajax

async function test() {
    let response = await fetch(url);
    let data = await response.json();
    console.log(data)
}
複製代碼

看起來是否是像同步代碼同樣？簡直完美！好吧，其實並不完美，async/await是ES7的API，目前還在試驗階段，還須要咱們使用babel進行轉譯成ES5代碼。json

還要提一下的是，fetch是比較底層的API，不少狀況下都須要咱們再次封裝。好比：axios

// jquery ajax
$.post(url, {name: 'test'})
// fetch
fetch(url, {
    method: 'POST',
    body: Object.keys({name: 'test'}).map((key) => {
        return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
    }).join('&')
})
複製代碼

因爲fetch是比較底層的API，因此須要咱們手動將參數拼接成'name=test'的格式，而jquery ajax已經封裝好了。因此fetch並非開箱即用的。

另外，fetch還不支持超時控制。

哎呀，感受fetch好垃圾啊，，還須要繼續成長。。

axios

axios是尤雨溪大神推薦使用的，它也是對原生XHR的封裝。它有如下幾大特性：

能夠在node.js中使用
提供了併發請求的接口
支持Promise API

簡單使用

axios({
    method: 'GET',
    url: url,
})
.then(res => {console.log(res)})
.catch(err => {console.log(err)})
複製代碼

寫法有不少種，自行查看文檔

併發請求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));
複製代碼