我知道这是RN中一个非常普遍的问题,我仍在尝试理解从属性文件加载数据时返回promise而不是仅仅返回值的非常可能的好处,这使得链接请求非常麻烦...但是无论如何。这是我现在拥有的东西,它是AsyncStorage RN实现的包装:
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;
}
此时,值变得不确定。在我的主要代码中,我有:
var filter = this._getFilter();
console.log('returned filter:',filter);
_getFilter函数是使用AsyncStorage包装器的函数,但是“返回的过滤器”在第一个函数之前记录,因此它在继续之前不等待返回的值,因此得到一个未定义的值。
最初,我认为仅通过使用async / await,AsyncStorage wold就会返回一个值而不是一个Promise,但是在测试之后,我从中得到的值是:
value = await AsyncStorage.getItem('key')
仍然是一个承诺,因此我必须使用then()来读取值。
基本上,我在日志中看到的顺序是:
_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
我不知道发生了什么或如何正确处理。这应该是非常简单且常见的用例。
我很想解决这个问题而无需使用第三方模块。
谢谢
解决方案编辑:在对异步/等待和回调的概念有更多了解之后,我终于有了一个有效的代码。我不喜欢它,因为它使代码很难阅读。我可能需要将其重构为使用Promise,但目前为止,它仍然有效。如果有人发现相同的问题,以下是一些摘要:
this._getFilter(body,this._filterSearchCallback,callback);
注意:我通过链发送正文,因为我在传递函数时正在“完成”信息。第二个参数是实际进行获取查询的第一个回调,第三个回调是获取函数的返回。
_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);
});
}
);
}
在这里,基本上,我将几个获取链在一起,因为我需要商店中的多个值。这是我真正不喜欢的部分。_sh是我的StorageHelper,它是AsyncStorage的包装,没什么好看的。
multiGet = async (key) => {
const value = await AsyncStorage.multiGet(key);
return value;
}
然后,我的最后一个回调实际上是在react native中进行提取并将JSON响应发送到主屏幕:
_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);
});
}
我将对此进行改进,使其更清洁,但目前为止,它可以工作。希望它也能帮助其他人。
曾几何时,我遇到了同样的问题,因此我将在这里与您分享我的所作所为。
基本上,您的执行将不加任何价值地前进,即未定义您现在所获得的结果,因此有3-4种方法可以摆脱这种情况:
1)异步等待2)回调
1)我们将从大多数人使用的回调开始。
我们将使用您的代码来实现此目的:
_getFilter(key,callback)
{
multiGet = (key) => {
var collect;
try {
var value = AsyncStorage.multiGet(key).then(
(values) => {
// value = values;
console.log('Then: ',values);
callback(values)
});
} catch (error) {
console.log('Error: ',error);
}
console.log('Final: ',value);
}
}
this._getFilter(key,function(filter){
console.log('returned filter:',filter);
});
2)异步/等待
如果单独使用await,则会出错,要在函数内部使用await,必须通过在函数名称之前设置async关键字来声明async函数。
async _getFilter(key)
{
multiGet = async (key) => {
var value,collect;
try {
value = await AsyncStorage.multiGet(key).then(
(values) => {
collect= values;
console.log('Then: ',values);
});
} catch (error) {
console.log('Error: ',error);
}
console.log('Final: ',value);
return collect;
}
//calling the async function
this._getFilter(key).then((filter)=>{
if(filter!=null)
console.log('returned filter:',filter)
else
console.log('error')
})
希望这能清除您的概念并帮助您与其他本机开发人员互动。我看到很多人都在为此事苦苦挣扎,所以今天我有机会消除您的疑虑。
干杯:)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句