如何在 axios 中实现 "before" 回调

Question

我正在 Vue.js（使用 axios）编写一个具有文件上传功能的项目。

我需要在 axios 中发送 POST 请求之前执行一个操作：

axios.post('/upload', form, {
  before: (xhr) => {
    fileObject.xhr = xhr;
  },
  onUploadProgress: (e) => {
    //emit progress event etc...
    console.log('upload progress: ' + e.loaded);
  }
}).then((response) => {
  console.log('finished...');
  //emit finished event etc...
}, () => {
  console.log('error...');
  //emit failed event etc...
});

除了 before 回调之外一切正常，当然因为它不是 axios 选项。从文档中，我知道我应该在发送请求之前使用拦截器来实现挂钩。但是我绕不过去。

编辑： 我想要类似于 Vue 的 $http:

this.$http.post('/upload', form, {
  before: (xhr) => {
    fileObject.xhr = xhr;
    //maybe do something else here
  },
  progress: (e) => {
    eventHub.$emit('progress', fileObject, e);
  }
}).then((response) => {
  eventHub.$emit('finished', fileObject);
}, () => {
  eventHub.$emit('failed', fileObject);
})

Answer 1

如果你需要在每次axios请求之前调用一个函数，你应该使用一个interceptor.

你的情况：

axios.interceptors.request.use((config) => {
  fileObject.xhr = config;
  return config;
});

axios.post('/upload', form, { ... });

如何在 axios 中实现 "before" 回调

How to implement a "before" callback in axios

javascript

axios

vuejs2