Comme l'indique la page axios GitHub, la réponse par défaut de la requête axios est :

{
  // `data` is the response that was provided by the server
  data: {},

  // `status` is the HTTP status code from the server response
  status: 200,

  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',

  // `headers` the headers that the server responded with
  // All header names are lower cased
  headers: {},

  // `config` is the config that was provided to `axios` for the request
  config: {},

  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance in the browser
  request: {}
}

Problème:

Mon schéma de réponse API est :

{
  success: true,
  message: '',
  data: {}
}

Donc, chaque fois que je fais une demande, je dois gérer la réponse comme :

(...).then((res) => res.data.data);

Comment puis-je changer le schéma de réponse d'axios pour éviter de faire .data.data à chaque fois ?

3
Syed Ali Taqi 19 févr. 2020 à 08:26

1 réponse

Meilleure réponse

Vous pouvez utiliser un intercepteur de réponse pour modifier la valeur de la promesse :

axios.interceptors.response.use(function (response) {
  return response.data.data
})

Vous ne feriez cela qu'une seule fois, puis cela s'appliquerait à toutes les demandes effectuées via l'instance par défaut axios. Une approche similaire peut être adoptée si vous créez vos propres instances axios à l'aide de axios.create.

Vous devrez peut-être également réfléchir à la manière de gérer les cas d'erreur, mais l'approche est sensiblement la même.

Documentation : https://github.com/axios/axios#interceptors

Mise à jour:

Si vous avez besoin d'accéder à success, message et data, vous n'aurez besoin que de ceci :

axios.interceptors.response.use(function (response) {
  return response.data
})

La déstructuration serait potentiellement utile lorsque vous écrivez le gestionnaire then :

(...).then(({ data, success, message }) => {

});
1
skirtle 19 févr. 2020 à 11:01