axios的默认配置里，处理progress

Question

import axios from 'axios'

let config =  axios.create({
    withCredentials: true,
    headers:{
        'X-Requested-With': 'XMLHttpRequest'
    },
    onUploadProgress: p => { return 100 * ( p.loaded / p.total ) },
    onDownloadProgress: p => { return 100 * ( p.loaded / p.total ) }
})

export default config

import axios from 'config'
axios.post('/喵', {
    onUploadProgress (a){
        console.log(a)
    },
    onDownloadProgress (a){
        console.log(a)
    }
})

如何在自定义配置里将progress处理好？

因为我每个 axios 请求都需要进度条

所以我希望这两个 Progress 返回的都是百分比而不是 Progress 事件对象，不然每个 axios 请求都要写一次处理 function

应该怎么做啊？

Answer 1

1. 创建了一个实例，用实例来写试试：

   config.post('/喵', {
       onUploadProgress (a){
           console.log(a)
       },
       onDownloadProgress (a){
           console.log(a)
       }
   })

2. 或者参考一下这个例子：axios 实现上传图片进度条

Answer 2

是这么个道理没错，建议返回个对象，把p也返回了

 onUploadProgress: p => { return {percentage: 100 * ( p.loaded / p.total ), p:p} },

Answer 3

可以试下在拦截器里面去做处理、

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    config.onUploadProgress = p => { return 100 * ( p.loaded / p.total ) };
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });