web-dev-qa-db-ja.com

axiosで「before」コールバックを実装する方法

ファイルアップロード機能を使用して、Vue.js（axiosを使用）でプロジェクトを作成しています。

POSTリクエストがaxiosで送信される前にアクションを実装する必要があります。

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);
})
javascriptvuejs2axios
12
Kornel

各axiosリクエストの前に関数を呼び出す必要がある場合は、 interceptor を使用する必要があります。

あなたの場合：

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

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