axios和fetch區別對比

axios

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規範，它自己具備如下特徵：

1. 從瀏覽器中建立 XMLHttpRequest
2. 支持 Promise API
3. 客戶端支持防止CSRF
4. 提供了一些併發請求的接口（重要，方便了不少的操做）
5. 從 node.js 建立 http 請求
6. 攔截請求和響應
7. 轉換請求和響應數據
8. 取消請求
9. 自動轉換JSON數據

fetch

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

1、fetch優點：

1. 語法簡潔，更加語義化
2. 基於標準 Promise 實現，支持 async/await
3. 同構方便，使用 isomorphic-fetch
4. 更加底層，提供的API豐富（request, response）
5. 脫離了XHR，是ES規範裏新的實現方式

2、fetch存在問題
fetch是一個低層次的API，你能夠把它考慮成原生的XHR，因此使用起來並非那麼舒服，須要進行封裝。

1. fetch只對網絡請求報錯，對400，500都當作成功的請求，服務器返回 400，500 錯誤碼時並不會 reject，只有網絡錯誤這些致使請求不能完成時，fetch 纔會被 reject。
2. fetch默認不會帶cookie，須要添加配置項： fetch(url, {credentials: 'include'})
3. fetch不支持abort，不支持超時控制，使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在後臺運行，形成了流量的浪費
4. fetch沒有辦法原生監測請求的進度，而XHR能夠

相關文檔

• https://github.com/axios/axios
• https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch