Réagir Natif AsyncStorage retourne promesse au lieu de la valeur
Je comprends que c'est un problème très commun dans RN et je suis encore à essayer de comprendre l'avantage possible de retourner une promesse lors du chargement de données à partir d'un fichier de propriété au lieu de simplement retourner la valeur, ce qui rend le chaînage des demandes très encombrant...mais de toute façon. Voici ce que j'ai en ce moment, qui est un wrapper de la AsyncStorage RN mise en œuvre:
multiGet = async (key) => {
var value = null;
try {
value = await AsyncStorage.multiGet(key).then(
(values) => {
value = values;
console.log('Then: ',values);
});
} catch (error) {
console.log('Error: ',error);
}
console.log('Final: ',value);
return value;
}
À ce stade, la valeur est undefined. Dans mon code principal, j'ai ceci:
var filter = this._getFilter();
console.log('returned filter:',filter);
La _getFilter fonction est celle qui utilise le AsyncStorage wrapper, mais le rendu de filtre est de journalisation avant la première fonction de sorte qu'il n'est pas d'attente pour les valeurs renvoyées avant de continuer, j'ai ainsi une valeur non définie.
Au début, je pensais qu'en utilisant simplement la async/await le AsyncStorage wold retourner une valeur à la place d'une promesse, mais après des tests, de la valeur que je reçois de:
value = await AsyncStorage.getItem('key')
est ENCORE qu'une promesse, j'ai donc utiliser, puis sur() pour lire la valeur.
Fondamentalement l'ordre que je vois dans les logs:
_getFilter
returned value: undefined
Then: value: here I get the correct value from the keys but the code already passed and I don't have the correct value in the variable
Je n'ai aucune idée de ce qui se passe ou comment gérer cela correctement. C'est censé être très simple et courante de cas d'utilisation.
J'aimerais résoudre ce sans l'aide d'un tiers de module.
Grâce
SOLUTION
Edit: Après avoir compris un peu plus sur les concepts de async/await et les rappels, j'ai enfin un code qui fonctionne. Je n'aime pas ça, parce que ça rend le code difficile à lire. Je pourrais avoir besoin pour refactoriser le code à utiliser promesses, mais pour l'instant, il fonctionne. Voici quelques extraits dans le cas où quelqu'un trouve la même question:
this._getFilter(body,this._filterSearchCallback,callback);
Note: j'envoie le corps par le biais de la chaîne parce que je suis "remplir" les informations que je passe les fonctions. Le deuxième paramètre est le premier rappel qui peut en fait aller chercher de la requête et le troisième rappel, c'est le retour de la fonction d'extraction.
_getFilter(body,callback,returnCallback){
{...}
this._sh.multiGet(keysBanks).then(
(banks) => {
filter.banks = banks;
console.log(banks);
this._sh.multiGet(keysCards).then(
(cards) => {
console.log(cards);
filter.credit_cards = cards;
callback(body,filter,returnCallback);
});
}
);
}
Ici, fondamentalement, je suis en enchaînant un couple est parce que j'ai besoin de plusieurs valeurs à partir de la boutique. C'est cette partie que je n'ai pas vraiment comme. _sh est mon StorageHelper qui est un wrapper pour le AsyncStorage, rien de fantaisie.
multiGet = async (key) => {
const value = await AsyncStorage.multiGet(key);
return value;
}
Puis mon dernier rappel qui fait la récupérer et envoyer la réponse JSON à l'écran principal de réagir natif:
_filterSearchCallback(body,filter,callback){
body.filter = filter;
return fetch(apiUrl, {method: 'post', body: JSON.stringify(body)})
.then((response) => response.json())
.then((responseJson) => {
callback(responseJson);
})
.catch((error) => {
console.error(error);
callback(responseJson);
});
}
Je vais améliorer cela et de le rendre plus propre, mais pour le moment, il fonctionne. Espérons que cela aide les autres aussi.
OriginalL'auteur sfratini | 2017-03-16
Vous devez vous connecter pour publier un commentaire.
Une fois, j'ai eu le même problème jusqu'à ce que j'ai fait, je vais partager avec vous ici.
Fondamentalement, votre exécution est aller de l'avant sans avoir à prendre de la valeur que je.e pas défini ce que vous obtenez en ce moment donc il y a 3-4 façons de sortir de cette:
1) async attendent
2) rappel
1) Nous allons commencer avec la fonction de rappel qui est utilisé par la plupart des gens.
Nous allons utiliser ton code pour mettre en œuvre cette:
2)async/await
Si vous utilisez attendent seule alors, vous obtiendrez une erreur, d'utiliser les attendent à l'intérieur d'une fonction, vous devez déclarer la fonction async en définissant le mot-clé async avant le nom de la fonction.
Espère que cela permettrait de vos concepts et vous aider avec d'autres réagissent aux développeurs natifs.J'ai vu beaucoup de gens aux prises avec cette chose si aujourd'hui j'ai eu la chance de les effacer vos doutes.
Cheers 🙂
Heureuse de vous aider à ami 🙂 juste aller pour elle
Essayez de rappel également, de sorte que vous obtenez de l'idée à la fois sur les concepts
Bon j'ai fait ce travail, mais je ne vais pas gagner un prix pour la plus lisible le code. Ne comprends toujours pas. Je vais poster ma solution de la question et de vous accorder la réponse, qui pourrait aider les autres.
Fin, il a travaillé pour vous, mais où êtes-vous toujours face au problème?
OriginalL'auteur Codesingh
la chose est
await
tourne la promesse en une valeur, vous n'avez pas besoin d'utiliser.then()
. Essayez ce qui suit:n'est-ce pas un peu le but de AsyncStockage? afin de rendre l'accès asynchrone?
Oui, ce que je voulais dire, c'est que, l'attendent vous fait attendre pour la réponse de la AsyncStorage, de faire l'appel synchrone. Mais, à utiliser attendent j'ai besoin de faire l'appel de la fonction asynchrone, donc de la manipulation de la promesse de quelque part. Je veux juste le code pour arrêter jusqu'à avoir une réponse et ne pas avoir à la chaîne le tout avec de l'époque() étant donné que parfois, est plus lourd et rend le code plus difficile à maintenir.
pourquoi ne fais-tu pas la fonction qui doit gérer la fonction async asynchrone? De cette façon, vous fondamentalement
await multiGet
et continuer avec le reste du codeDès que je fais ça, l'appel de la fonction devient asynchrone et ne s'arrête pas, donc je dois gérer la promesse il y a aussi 🙂 Comme je l'ai dit, quelque part, vous aurez à traiter avec la promesse. J'ai juste posté une solution qui fonctionne, je n'aime pas, parce que c'est moche, mais bon.
OriginalL'auteur dhorelik