axios和fetch

axios

基于XHR的Promise封装

优点

1. PromiseAPI
2. 客户端防止CSRF
3. 提供并发请求的接口
4. 从node创建http请求
5. 拦截器
6. 取消请求abort

拦截器

• 添加拦截器

  axios.interceptors.request.use(
    (config) => {
      <!-- 加入参数 -->
      config.params = {a:666}
      return config
    },
    (err) => {
      return Promise.reject(err)
    }
  );

• 执行顺序

  • 请求拦截器 后面的拦截器先执行
  • 响应拦截器 前面的拦截器先执行

  axios.interceptors.request.use(config=>{
    console.log('request1')
  },err=>{
    console.log('err1')
  })
  axios.interceptors.request.use(config=>{
    console.log('request2')
  },err=>{
    console.log('err2')
  })
  
  axios.interceptors.response.use(res=>{
    console.log('response1')
  }，err=>{
    console.log('resErr1')
  })
  axios.interceptors.response.use(res=>{
    console.log('response2')
  }，err=>{
    console.log('resErr2')
  })
  
  <!-- console -->
  request2
  request1
  response1
  response2

取消请求

const CancelToken = axios.CancelToken;
let cancel = null
btn.onclick = () => {
  if(cancel !== null) cancel()
  <!-- 执行取消函数 -->
  axios({
    method:'GET',
    url:'http://xxxxxxx',
    <!--  -->
    cancelToken : new CancelToken(c=>{
      cancel = c
      <!-- cancelToken -->
    })
  })
}.then(res=>{
  cancel = null
})

fetch

原生api

缺点

1. 只针对网络请求报错(请求不能完成)
2. 携带cookie要添加配置
3. 不支持取消请求abort
4. 无法检测请求进度