我如何在 AsyncStorage React Native 中执行异步/等待？（react async await异步请求）

25-02-10 22

本文将带您了解关于我如何在AsyncStorageReactNative中执行异步/等待？的新内容，同时我们还将为您解释reactasyncawait异步请求的相关知识，另外，我们还将为您提供关于As

本文将带您了解关于我如何在 AsyncStorage React Native 中执行异步/等待？的新内容，同时我们还将为您解释react async await异步请求的相关知识，另外，我们还将为您提供关于AsyncStorage.getItem返回undefined：React Native、react native AsyncStorage 使用实例异步存储数据以及读取、React Native AsyncStorage本地存储工具类、React Native 之通过AsyncStorage 实现数据持久化操作的实用信息。

本文目录一览：

我如何在 AsyncStorage React Native 中执行异步/等待？（react async await异步请求）
AsyncStorage.getItem返回undefined：React Native
react native AsyncStorage 使用实例异步存储数据以及读取
React Native AsyncStorage本地存储工具类
React Native 之通过AsyncStorage 实现数据持久化操作

我如何在 AsyncStorage React Native 中执行异步/等待？（react async await异步请求）

如何解决我如何在 AsyncStorage React Native 中执行异步/等待？？

所以，这是我在 React Native 项目中的 index.js

import React,{useEffect} from ''react'';
import {AppRegistry} from ''react-native'';
import App from ''./App'';
import {name as appName} from ''./app.json'';

import {
  ApolloClient,HttpLink,ApolloLink,InMemoryCache,concat,ApolloProvider,} from ''@apollo/client'';
import {setContext} from ''@apollo/client/link/context'';
import AsyncStorage from ''@react-native-async-storage/async-storage'';

const httpLink = new HttpLink({uri: ''https://dev.saba.id/graphql''});

const getToken = async () => {
  const token = await AsyncStorage.getItem(''SESSION_TOKEN'')
    .then(data => {
      if (data) {
        return data;
      } else {
        return;
      }
    })
    .catch(err => {
      console.log(err);
    });
  console.log(''------------'');
  console.log(''console.log inside getToken function'');
  console.log(''Bearer '' + token);
  console.log(''------------'');
  return ''Bearer '' + token;
};

console.log(''------------'');
console.log(''output of getToken function'');
console.log(getToken());
console.log(''------------'');

const headerLink = setContext((request,prevIoUsContext) => ({
  headers: {
    // Make sure you include any existing headers!
    ...prevIoUsContext.headers,authorization: getToken(),},}));

const client = new ApolloClient({
  link: headerLink.concat(httpLink),cache: new InMemoryCache(),});

const Application = () => {
  return (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );
};

AppRegistry.registerComponent(appName,() => Application);

好的，现在只关注 getToken 函数以及该函数旁边的 console.log。

在我看来，当我们使用 async/await 时，该函数将在令牌变量完成后返回以解决它们的结果，对吗？

但是我得到的输出对我来说真的很困惑.. getToken 函数返回的速度比 await AsyncStore 值更快。

这是代码的输出：

 BUNDLE  ./index.js 

 LOG  ------------
 LOG  output of getToken function
 LOG  {"_U": 0,"_V": 0,"_W": null,"_X": null}
 LOG  ------------
 LOG  Running "sabaCustomerApp" with {"roottag":61,"initialProps":{}}
 LOG  ------------
 LOG  console.log inside getToken function
 LOG  Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoic2FiYSIsImVtYWlsIjoic2FiYUBnbWFpbC5jb20iLCJyb2xlIjoic3VwZXIgYWRtaW5pc3RyYXRvciIsImlhdCI6MTYyNzQ4ODY1MCwiZXhwIjoxNjMwMDgwNjUwfQ.W3vCNmIxsIyscJBk5aPMN3kqn7EVIEMLfZVgXqHB_UA
 LOG  ------------

你能看到吗？ getToken() 函数比函数内部的 console.log 重新调整得更快。怎么能跑成这样？

我想要的是，getToken() 函数返回一个字符串，例如“Bearer blablablabla”

解决方法

您误解了异步函数的工作原理。

当你调用一个异步函数时，它实际上将函数体包装在一个返回的 Promise 中：

async function test() {
    await ...;
    return 123;
}

const promise = test();
console.log(promise); // Promise
promise.then(result => console.log(result));
// ^ logs 123 at some point
console.log(''continue''); // runs before .then(...)

如果您希望您的函数等待 Promise 解析，它也必须是异步的并使用 await 关键字：

function waitSecond() {
    // This function isn''t async,but still returns a Promise
    return new Promise(resolve => setTimeout(() => resolve(123),1000));
}
async function otherFunction() {
    console.log(Date.now()); // x
    const result = await waitSecond();
    console.log(result); // 123
    console.log(Date.now()); // x+1000 (roughly)
}

我建议阅读 this article 和它提到的类似主题。

AsyncStorage.getItem返回undefined：React Native

代码流是-

我正在检查 AsyncStorage中是否 存在名为 listobject 的条目。

如果它不存在，那么我创建一个对象，添加一些属性并设置存储。我将存储存储到 obj， 因为我必须在下一个 if 条件中进行比较。
如果 listobject 条目已经存在（第二次），则直接进入第二个块并进行比较。（我在第一步中获得值到obj的原因是因为我可以有一个常见的 obj.data.isdirty 条件。

这是我的代码-

AsyncStorage.getItem('listobject').then((obj) => {
    if(obj == undefined)
    {
        var obj1 ={};
        obj1.data ={};
        obj1.data.isdirty = true;
        console.log("obj1 = "+ JSON.stringify(obj1));
        AsyncStorage.setItem('listobject',obj1);
        obj = AsyncStorage.getItem('listobject');
        console.log("obj = "+ JSON.stringify(obj));
    }
    if(obj.data.isdirty)
    {
        obj.data.isdirty = false;
        AsyncStorage.setItem('listobject',JSON.stringify(obj));
        return AsyncStorage.getItem('listobject');
    }
}).done();

我有2个问题是同一问题的结果-

日志。我正在设置obj1并为obj获得相同的值（以便可以比较下一个if条件）。为什么我不能得到，我有相同的值设置？

12-03 00：27：56.281 32598-487 / com.abc D / ReactNativeJS：’obj1 = {“ data”：{“
isdirty”：true}}’

12-03 00：27：56.286 32598-487 / com.abc D / ReactNativeJS：’obj = {“ _37”：0，“ _ 12”：null，“ _ 59”：[]}’

这是以上日志的最终结果。我正在获取list.data.isdirty未定义。我想这是因为 obj 中不存在我正在访问的JSON格式，即obj.data.isdirty不存在。那么，我该如何克服呢？

未定义不是对象（评估“ list.data.isdirty”）；

请告诉我我在做什么错？

react native AsyncStorage 使用实例异步存储数据以及读取

- - 简介
  - 常用API
    - 读取数据
    - 写入数据
    - 删除数据
    - 更多API
  - 保存目录
    - iOS端
    - Android
  - 使用实例
    - 异步存储数据
    - 异步读取数据
    - 异步删除某条数据
    - 异步删除所有数据
    - 同步读取数据
    - 同步存储数据
  - 在原生代码中获取存储的数据

简介

AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的。
在真正使用的过程中建议在AsyncStorage的基础上做一层抽象封装，而不是直接使用AsyncStorage。
推荐由React Native中文网封装维护的react-native-storage模块，提供了较多便利功能。

常用API

1. 读取数据

//读取key字段并将结果作为第二个参数传递给callback
static getItem(key: string,callback?: ?(error: ?Error,result: ?string) => void)
//获取keys所包含的所有字段的值，调用callback回调函数时返回一个key-value数组形式的数组 
static multiSet(keyvaluePairs: Array<Array<string>>,callback?: ?(errors: ?Array<Error>) => void)

2. 写入数据

将key字段的值设置成value，并在完成后调用callback函数。如果有任何错误发生，则会传递一个Error对象作为第一个参数。返回一个Promise对象。

//写入一个数据
static setItem(key: string,value: string,callback?: ?(error: ?Error) => void)
//写入一组数据（key-value数组）
static multiSet(keyvaluePairs: Array<Array<string>>,callback?: ?(errors: ?Array<Error>) => void)

3. 删除数据

删除一个字段。返回一个Promise对象。

static removeItem(key: string,callback?: ?(error: ?Error) => void)

删除所有键在keys数组中的数据。返回一个Promise对象。

static multiRemove(keys: Array<string>,callback?: ?(errors: ?Array<Error>) => void)

删除全部的AsyncStorage数据，返回一个Promise对象。

static clear(callback?: ?(error: ?Error) => void)

…更多API

保存目录

iOS端

iOS 端保存目录： Documents 目录下的RCTAsyncLocalStorage_XXX/manifest.json 文件，保存的文档实质就是个json 文本

//在原生代码中获取Documents目录路径
NSArray *paths_Documents =NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask,YES);
Nsstring *docDir = [paths_Documents objectAtIndex:0];

使用模拟器调试应用，使用上诉代码输出Documents文件目录，点击mac 最上方的菜单栏的前往->前往文件夹输入获得的目录，即可跳转到该目录下可找到上面的文件。

Android

暂时略

使用实例

异步存储数据

异步存储一条数据

let userInfor = {email:'xxxx@163.com',name:'xxx',age:20};
const tableKey = 'XXX-XXXX_TableKey'; 
AsyncStorage.setItem(tableKey,JSON.stringify(userInfor),function(err){
      if (err) {
         //console.log('__storageUserItem:(error)'+err);
           return;
      }
      //console.log('__storage:(success)' + userInfor.email);
 });

异步存储多条数据

let userInfor = {email:'xxxx@163.com',age:20};
AsyncStorage.multiSet(userInfor,function(err){
      if (err&&err.length>0) {
         //console.log('__storageUserItem:(error),出错条数数:'+err.length);
          return;
      }
      //console.log('__storage:(success)' + userInfor.email);
 });

注意以上写法的区别，保存在文件具体区别是什么。
1.第一种
是将userInfor 做为一整条数据存储到文件中对应的键值 tableKey 上.即:

2.第二种
是将userInfor 做为key-value 多条数据存储到文件中，如:

异步读取数据

AsyncStorage.getItem(tableKey,function(err,result) {
        if (err) {
           //console.log('AsyncStorage.getItem error'+err);
           return;
        }
        //console.log('AsyncStorage.getItem success'+JSON.parse(result));
        return JSON.parse(result);
  });

异步删除某条数据

AsyncStorage.removeItem(key,function(err) {
      if (err) {
         //console.log('__removeItem:'+err);
      }
     //Todo:other
});

异步删除所有数据

AsyncStorage.clear(key,function(err) {
      if (err) {
         //console.log('__clearStorage:'+err);
      }
     //Todo:other
});

同步读取数据

这个使用场景也蛮多的，通过获取的数据来判断进入哪个界面或者进一步做什么事，从功能逻辑上必须有先后，这时需要等到获取数据后才能进行下一步操作。
如：免登录功能，如果用户已经登录过(没有点击退出)下次启动APP时直接进入主页面，如果已经退出或第一次使用则进入登录页面。

componentwillMount(){
    this._loadStorage();
}
async _loadStorage() {
    let  _that = this;
    try {
       let useReadability = await AsyncStorage.getItem(userInforIsLogin_tableKey);
       if (useReadability !== null) {
         const userInfor =  JSON.parse(useReadability) ;
         //console.log('(AsyncStorage.getItem) success'+userInfor.email);
         if (userInfor.token!=null) { //根据token 或其它标志来判断
           //Todo 说明是登录状态，进入主页面
           return;
         }
      } 
      //Todo 进入登录页面 
    } catch(e) {
        console.log('_loadStorage error'+e);
      //Todo 进入登录页面 
    }
  }

同步存储数据

…略

在原生代码中获取存储的数据

在原生代码中，获取文件里面的内容（下面是oc 代码）

NSArray* paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,YES);
        Nsstring* thepath = [paths lastObject];
        thepath = [thepath stringByAppendingPathComponent:@"RCTAsyncLocalStorage_V1/manifest.json"];
        NSLog(@"目录：%@",thepath);
        //第一种方法： NSFileManager实例方法读取数据
        NSFileManager* fm = [NSFileManager defaultManager];
        NSData* data = [[NSData alloc] init];
        data = [fm contentsAtPath:thepath];
        NSLog(@"%@",[[Nsstring alloc] initWithData:data encoding:NSUTF8StringEncoding]);         

        //第二种方法： NSData类方法读取数据
        data = [NSData dataWithContentsOfFile:thepath];
        NSLog(@"NSData类方法读取的内容是：%@",[[Nsstring alloc] initWithData:data encoding:NSUTF8StringEncoding]);         

        //第三种方法： Nsstring类方法读取内容
        Nsstring* content = [Nsstring stringWithContentsOfFile:thepath encoding:NSUTF8StringEncoding error:nil];
        NSLog(@"Nsstring类方法读取的内容是：\n%@",content);

React Native AsyncStorage本地存储工具类

利用react-native组件AsyncStorage，通过promise，保存本地数据，具体内容如下

rush:java;"> import {AsyncStorage} from 'react-native';

export default class StorageUtil {

/**

保存一个Json对象
@param key
@param value
@param callback
*/
static async saveJsonObject(key,value) {
return await this.saveString(key,JSON.stringify(value));
}

/**

获取一个Json对象
@param key
@param defaultObject
*/
static async getJsonObject(key,defaultObject) {
let result=null;
try{
result=await this.getString(key,null);
result=await JSON.parse(result);
}catch (err){
if(defaultObject){
return Promise.resolve(defaultObject);
}else{
return Promise.reject(err);
}
}
return result;

}

/**

保存一个值
@param key
@param value
*/
static async saveString(key,value) {
if (key != null && value != null) {
//Key 与Value 都不为空
try {
await AsyncStorage.setItem(key,value)
} catch (err) {
return Promise.reject(err)
}
return Promise.resolve(true);
} else {
return Promise.reject({"msg": "Key and value can not be null"});
}
}

/**

获取一个值
@param key
@param defaultValue
*/
static async getString(key,defaultValue) {
let result = null;
let noDataError = {"msg": "No value found !"};
if (key != null) {
result = await AsyncStorage.getItem(key);
// console.log('get string result',result,defaultValue);
return result ? result : defaultValue!=null ? defaultValue : Promise.reject(noDataError);
} else {
if (defaultValue) {
return Promise.resolve(defaultValue);
} else {
return Promise.reject(noDataError);
}
}

}

/**

移除一个值
@param key
*/
static async remove(key) {
let result = true;
try {
result = await AsyncStorage.removeItem(key);
} catch (err) {
return Promise.reject(err)
}
return result;
}

/**

获取所有已存储
*/
static async getAllKeys() {
let result=true;
try {
result = await AsyncStorage.getAllKeys();
} catch (err) {
return Promise.reject(err)
}
return result;
}

}