javascript - 我如何从异步存储中检索数据并在我的组件中使用它？

Question

我已经在异步存储中保存了一个 user_id 和 token ，我可以通过控制台日志检索它。具有检索功能。所以我知道 set 函数运行良好，deviceStorage 中的函数都是异步的。

当尝试在我的组件中使用检索到的 user_id 和 token 时出现问题，它返回未定义。

我如何从存储中获取项目并稍后在我的代码中使用它，我想将 token 和用户 ID 用于获取请求。请帮助我并强调最好的方法。

    import deviceStorage from "../components/services/deviceStorage";
    class Jobs extends Component {
    constructor() {
       super();
       this.state = {
       jobsData: [],
       isLoading: true
       };
      }

    componentDidMount() {


        deviceStorage.retrieveToken().then(token => {
            this.setState({
               token: token
                 });
        });

        deviceStorage.retrieveUserId().then(user_id => {
            this.setState({
               user_id: user_id
             });
        });


const opts = {
  method: "GET",

  headers: {
    "Content-Type": "application/json",
    Authorization: "Token " + this.state.token
  }
};

fetch("http://example.com/job/" + this.user_id, opts)
  .then(res => res.json())
  .then(jobs => {
    this.setState({
      jobsData: jobs,
      isLoading: false
    });
    console.log(jobsData);
  })
  .catch(error => {
    console.error(error);
  });
  }

  render {} 

检索和设置代码

import {AsyncStorage} from 'react-native';


const deviceStorage = {
    async storeItem(key, item) {
        try {
            //we want to wait for the Promise returned by AsyncStorage.setItem()
            //to be resolved to the actual value before returning the value
            var jsonOfItem = await AsyncStorage.setItem(key, JSON.stringify(item));
            return jsonOfItem;
        } catch (error) {
           console.log(error.message);
        }
    },
    async retrieveItem(key) {
        try {
            const retrievedItem = await AsyncStorage.getItem(key);
            const item = JSON.parse(retrievedItem);
           // console.log(item);
            return item;
        } catch (error) {
            console.log(error.message);
        }
        return
    }
};

export default deviceStorage;`

Answer 1

有两种方法可以获取存储在异步存储中的数据:

(1) Promise方法。在这里，您的代码不会等待 block 完成并返回 promise ，如果 promise 解决，则返回 .then 子句，如果有错误，则返回 .catch 子句。

(2) Async和Await方法。这是更可取的，在这里您的代码等待执行，然后再继续下面的示例之一:

retrieveData() {
 AsyncStorage.getItem("id").then(value => {
        if(value == null){
             //If value is not set or your async storage is empty
        }
        else{
             //Process your data 
        }
      })
        .catch(err => {
            // Add some error handling
  });

第二种方法示例:

async retrieveData() {
try {
 let value = await AsyncStorage.getItem("id");
 if (value !== null) {
  //you have your data in value variable
  return value;
 }
}
catch (error) {
// Error retrieving data
}


}