AsyncStorage.getItem获取的到底是什么类型的数据

1,存储数据
set ( key, value) {
AsyncStorage.setItem( key, value ); //value一定是字符串:
}
set ( “name”, “bob”) ;
此时storage中应该有这样的键值对数据:
“name” : “bob ”;

2,获取不到数据的情况:
get ( key) {
return AsyncStorage.getItem( key) ;
}
var a=get(“name”); //怀疑返回值是: “bob” , 不对
var b=a.name; // 怀疑返回值是: name: bob ,不对
var c=JSON.stringify(a); //怀疑返回值是: bob , 不对
var d=JSON.parse(a); //怀疑返回值是: “name”: “bob” ,不对

3,最后获取到的情况:
AsyncStorage.getItem(“name”).then((result)=>{
Alert.alert(result); // bob
})

因为asyncstorage.getItem()返回的值是一个promise对象,promise对象,promise对象,,这个对象有很多方法,其中then()方法就是其中一个,但是为什么必须使用then()才能获取到数据呢?
既然是对象,是不是意思返回的是name:bob,是不是意思直接用value.name就可以获取bob值?
并不是,实际上,promise 它是一个构造函数,它的原型还是Object对象,就像Function,Array,等,他们都可以用来创建对象:new Function(), new Array() ,但是他们的原型都是Object,说到这你应该明白,Promise其实和Function,Array是一个意思,可以使用new Promise()创建对象。
为什么要创建Promise对象呢?Promise有什么过人之处?
Promise是用来处理异步操作的,它其实跟Array一样是个容器,只不过Array里保存的是数组,而Promise中保存的是未完成的操作(就是异步操作)
可是要想使用异步操作,直接使用回调函数就行了呀?
a(callback){ } ;
b(){ };
a(b()) ;
这个回调函数才是一个,要是多个回调,嵌套起来太复杂了。而使用promise,由于是链式操作不需要层层嵌套,就方便多:
asyncstorage . getItem() . then() .then() .then()…
既然是异步操作,总得有个表现数据获取情况的东西吧?
有的,promise有三种状态:pending(进行中),resolved(完成),rejected(拒绝)。只可能从pending到resolved,或者从pending到rejected。
说到这里,所以,promise用来处理异步操作,因为asnycstorage.getitem()是一个异步操作,所以返回的是处理异步操作的异步对象promise,所以直接使用promise的then()方法即可获取异步操作的结果,而不用使用回调函数。
这样整个问题就解决了,既然AsyncStorage.getItem()返回的是异步对象结果,那么你不等状态从pending转换到resolved就直接将结果赋值给变量,当然获取不到值。所以就会出现,将AsyncStorage.getItem()赋值给变量,alert处理的 结果是[object object],但是使用then(result)返回的就是想要的结果了!

4,但是实际上看下面代码:
//封装一个方法返回promise对象:
loadData(keyName) {
var p = new Promise(function(resolve, reject){
//做一些异步操作
AsyncStorage.getItem(keyName, function (error, result) {
if (!error) {
return resolve(result);
}else{
return resolve( ‘数据为空’);
}
})

 });
 return p;

}
//使用封装好的方法去获取数据:
var account = this.loadData(“account”).then(function(data){
console.log(data); //3
return data ;
});
console.log(account); //promise{ }
本来以为account会是想要的值3,结果,只有console.log(data)打印出来的是期待得到的数据,而console.log(account)打印得到的任然是promise对象。根据后台打印顺序,得出结论,先执行的是 console.log(account);然后才执行console.log(data)语句。
在这里插入图片描述
后来一想,,对啊,.then()是异步操作,肯定是先执行 console.log(account); 语句再返回执行,于是我给.log(account);设置了定时器,设置成2秒后执行,但是没想到2秒后执行顺序是对的,但是打印出来的account还是promise对象,这就说明,data值只能在then()这个函数里获取,如果想在then()函数外使用data,那么换一种方式:
var account1 = this.loadData(“account”).then(function(data){
account=data;
});
setTimeout( function(){
console.log(account) //这样打印出来的结果就是我们想要的值3了,
}, 100);
由于setTimeout不好控制延迟时间,那么如果没有特殊要求一定要在then()方法外执行函数,则直接在then()函数内部使用data。

下面是针对这个问题的一个实例:
loadData(keyName) {
var p = new Promise(function(resolve, reject){
//做一些异步操作
AsyncStorage.getItem(keyName, function (error, result) {
if (!error) {
return resolve(result);
}else{
return resolve( ‘数据为空’);
}
})

    });
    return p;
}

//功能: 向后台提交asyncstorage获得的数据,以及本地this.state.addtext值。
submit_roomnum(){
// DeviceStorage.set(‘account’,500);
//var value= DeviceStorage.get(‘account’);
var addtext=this.state.addtext;
var pageskip=this.props.navigation;
var account1 = this.loadData(“account”).then(function(data){
var url=“http://www.givc.com/room.php”;
options={
method:‘POST’,
mode: ‘cors’,
headers:{
‘Accept’:‘text/plain’,
‘Content-Type’:‘application/json’,
},
body:JSON.stringify({
‘state’:addtext,
‘account’: data,
})
};
fetch(url,options).then((response)=>{
pageskip.navigate(‘Status’);
}
);
});
}
//注意:由于在then()函数内部使用this的时候,this指向的是promise对象,而不是外部组件,所以在then()函数外提前定义变量用于保存this的指向,以便获取this.state.addtext等state值;

猜你喜欢

转载自blog.csdn.net/kalinux/article/details/88777719
今日推荐