fetch与axios的对比

如何携带cookie

fetch默认不会带cookie，需要配置crendentials:“include”。但axios也不支持，需要配置
axios.defaults.withCredentials = true

fetch好处

1.原生支持：无需引入额外的库，浏览器自带。
2.简单易用：语法简单，返回一个 Promise。

fetch缺点

1.fetch不支持取消请求。
2.需要自己手动转换成为对应的数据类型，常见的转换方式有 .json()、.text()、.blob() 等

axios缺点

1.需要引入第三方库，增加了项目的依赖。
2.包体积较大：相比 fetch，axios 的包体积更大，可能影响页面加载速度

axios好处

1.提供了一些并发请求的接口

import axios from 'axios'
methods:{
   getUserAccount() {
     return axios.get('/user/12345');
   },
   getUserPermissions() {
     return axios.get('/user/12345/permissions');
   }
}
created() {
   axios.all([this.getUserAccount(),this.getUserPermissions()])
   .then(axios.spread((res1, res2)=>{
   //1.axios.spread把获取到的数组拆分为一个个对象
   //2.获得的结果的顺序与axios.all中数组的存放顺序有关
   //3.有一个回调函数失败则全部失败
      console.log('请求1结果',res1)
      console.log('请求2结果',res2)
   }))  
}

2.自动转换JSON数据

// axios
axios.get('https://api.github.com/orgs/axios')
  .then(response => {
    console.log(response.data);
  }, error => {
    console.log(error);
  });

// fetch()
fetch('https://api.github.com/orgs/axios')
  .then(response => response.json())    // one extra step
  .then(data => {
    console.log(data) 
  })
  .catch(error => console.error(error));

3.防止CSRF攻击

4.可以拦截(interceptors)

拦截器分为请求拦截器和响应拦截器

axios.interceptors.request.use((config)=> {
  // 在发送请求之前做些什么
  return config;
}, (error)=> {
  // 对请求错误做些什么
  return Promise.reject(error);
});
axios.interceptors.response.use((response)=> {
  // 对响应数据做点什么
  return response;
}, (error)=> {
  // 对响应错误做点什么
  return Promise.reject(error);
});

5.可以取消请求(cancelToken)

import axios from "axios"
var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch((thrown)=> {
  if (axios.isCancel(thrown)) {
    console.log('取消请求', thrown.message);
  } else {
    // 处理错误
  }
});
// 执行取消请求（message 参数是可选的）
source.cancel(`Operation canceled by the user.`);

还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken( c => {
    cancel = c;
  })
});

// 取消请求
cancel();

更多请参考官网 Axios中文文档