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