web-dev-qa-db-fra.com

Comment implémenter un rappel "avant" dans axios

J'écris un projet dans Vue.js (En utilisant axios) avec la fonctionnalité de téléchargement de fichiers.

Je dois implémenter une action avant que la demande POST soit envoyée dans 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...
});

Tout fonctionne sauf le rappel before bien sûr car ce n'est pas une option axios. D'après la documentation, je sais que je devrais utiliser un intercepteur pour implémenter des hooks avant d'envoyer des requêtes. Mais je ne peux pas le contourner.

Edit: J'aimerais avoir quelque chose de similaire au $http De Vue::

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

Si vous devez appeler une fonction avant chaque requête axios, vous devez utiliser un intercepteur .

Dans ton cas:

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

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