Renvoi de données à partir d'Axios API

Retour, la promesse de l'axios appel dans le axiosTest fonction, puis obtenir la valeur de la promesse lors de l'appel à l'aide d'une autre .then

function axiosTest() {
  return axios.get(url).then(response => {
    //returning the data here allows the caller to get it through another .then(...)
    return response.data
  })
}

axiosTest().then(data => {
  response.json({ message: 'Request received!', data })
})

Je recommande aussi la lecture plus sur la façon dont les promesses de travail: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

axiosTest() est tir asynchronously et de ne pas être attendu.

Un then() function doit être raccordé par la suite dans le but de capturer le response variable (axiosTestData).

Voir Promesse pour plus d'info.

Voir Async pour monter de niveau.

JS:

//Dummy Url.
const url = 'https://jsonplaceholder.typicode.com/posts/1'

//Axios Test.
const axiosTest = axios.get

//Axios Test Data.
axiosTest(url).then(function(axiosTestResult) {
  console.log('response.JSON:', {
    message: 'Request received',
    data: axiosTestResult.data
  })
})

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>

L'axios bibliothèque crée une Promesse() de l'objet. La promesse est un objet intégré dans JavaScript ES6. Lorsque cet objet est instancié à l'aide du mot clé new, elle prend une fonction en tant qu'argument. Cette fonction unique, à son tour prend deux arguments qui sont aussi des fonctions de résoudre et de les rejeter.

Promet d'exécuter le code côté client et, en raison de cool Javascript asynchrone flux, pourrait éventuellement résoudre une ou deux choses, que la résolution (généralement considérés comme sémantiquement équivalent à une Promesse de succès), ou que le rejet (largement considéré comme une erreur de résolution). Par exemple, il peut contenir une référence à un objet promise qui comprend une fonction qui va finalement retourner un objet de réponse (ce qui serait contenue dans la Promesse de l'objet). D'une façon que nous pourrions utiliser une telle promesse est d'attendre la promesse du se résoudre à une sorte de réponse.

Vous pouvez relancer nous ne voulons pas attendre quelques secondes pour que notre API pour revenir à un appel! Nous voulons que notre INTERFACE utilisateur d'être en mesure de faire des choses tout d'attente pour l'API de réponse. À défaut, nous aurions un très lente de l'interface utilisateur. Alors, comment faire face à ce problème?

Bien une Promesse est asynchrone. Dans une implémentation standard de moteurs responsable de l'exécution de code Javascript (comme le Nœud ou le navigateur commun) sera résolu dans un autre processus, alors que nous ne savons pas à l'avance quel sera le résultat de la promesse sera. Une stratégie habituelle consiste alors à envoyer de nos fonctions (c'est à dire une Réagir setState pour une fonction de classe) à la promesse, résolu, selon une sorte de condition (dépend de nos choix de bibliothèque). Cela se traduira dans nos locaux de Javascript les objets en cours de mise à jour basée sur la promesse de résolution. Ainsi, au lieu de les accesseurs et mutateurs (traditionnelle de la programmation orientée objet) que vous pouvez penser de fonctions que vous pouvez envoyer à vos méthodes asynchrones.

Je vais utiliser Fetch dans cet exemple, donc vous pouvez essayer de comprendre ce qui se passe dans la promesse et de voir si vous pouvez reproduire mes idées au sein de votre axios code. Fetch est similaire à axios sans l'inné JSON de conversion, et a un débit différents pour résoudre les promesses (ce qui devrait se référer à l'axios documentation pour en savoir plus).

GetCache.js

const base_endpoint = BaseEndpoint + "cache/";
//Default function is going to take a selection, date, and a callback to execute.
//We're going to call the base endpoint and selection string passed to the original function.
//This will make our endpoint.
export default (selection, date, callback) => {  
fetch(base_endpoint + selection + "/" + date) 
//If the response is not within a 500 (according to Fetch docs) our promise object
//will _eventually_ resolve to a response. 
.then(res => {
//Lets check the status of the response to make sure it's good.
if (res.status >= 400 && res.status < 600) {
throw new Error("Bad response");
}
//Let's also check the headers to make sure that the server "reckons" its serving 
//up json
if (!res.headers.get("content-type").includes("application/json")) {
throw new TypeError("Response not JSON");
}
return res.json();
})
//Fulfilling these conditions lets return the data. But how do we get it out of the promise? 
.then(data => {
//Using the function we passed to our original function silly! Since we've error 
//handled above, we're ready to pass the response data as a callback.
callback(data);
})
//Fetch's promise will throw an error by default if the webserver returns a 500 
//response (as notified by the response code in the HTTP header). 
.catch(err => console.error(err));
};

Maintenant que nous avons écrit notre GetCache méthode, permet de voir à quoi il ressemble à une mise à jour de Réagir état du composant comme un exemple...

Certains Réagissent Composant.jsx

//Make sure you import GetCache from GetCache.js!
resolveData() {
const { mySelection, date } = this.state; //We could also use props or pass to the function to acquire our selection and date.
const setData = data => {
this.setState({
data: data,
loading: false 
//We could set loading to true and display a wee spinner 
//while waiting for our response data, 
//or rely on the local state of data being null.
});
};
GetCache("mySelelection", date, setData);
}

En fin de compte, vous n'avez pas de "retour" des données en tant que tel, je veux dire que vous pouvez, mais c'est plus idiomatique changer votre façon de penser... Maintenant nous sommes envoi données à des méthodes asynchrones.

Bon Codage!