访问 AsyncStorage 时正确使用异步

Question

我正在开发一个 React Native 应用程序，它使用 jwt tokens 访问我的后端 API。我正在尝试将令牌保存在 AsyncStorage 中，但看起来我没有正确使用 async。

我有一个实用程序可以帮助我设置 fetch 选项，这也是我试图从 AsyncStorage 中获取 jwt token 但我无法做到的地方正确使用 async 来获取令牌。要么我最终得到一个看起来像未解决的承诺，要么得到一个错误，告诉我我使用 await 不正确。

我需要一些帮助才能在我的 fetch 实用程序中正确读取我的 jwt token。

这是我的实用程序的样子：

import { getAccessToken } from '../utils/my-utils';

export const fetchOptionsGet = async () => {

    getAccessToken().then(token => {

        return {
            method: 'GET',
            mode: 'cors',
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer " + token
            }
        };
    });
}

这是 getAccessToken() 函数的代码：

import { AsyncStorage } from "react-native";

export const getAccessToken = async () => {

    const accessToken = await AsyncStorage.getItem("access_token");

    return accessToken;
};

我认为问题是因为我从 fetchOptionsGet() 函数调用 async 函数，所以它也变成了 async 函数。在我的 API 方法中，当我尝试使用 await 关键字调用它时，出现编译错误。如果我将对 API 的 fetch 调用包装在 .then(token => { // API call here }) 中，那么我会得到一个 react-redux 错误，告诉我我的函数应该 return 一个简单的对象。

阅读我的 jwt token 并在我的 fetch 通话中使用它的正确方法是什么？

Answer 1

export const fetchOptionsGet = async () => {

    const token = await getAccessToken();
    return {
        method: 'GET',
        mode: 'cors',
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + token
    }
}

await 等待承诺解决。然后你可以 return 任何你需要 return.

Answer 2

export const fetchOptionsGet = async () => {
const accessToken = await AsyncStorage.getItem("access_token");
return {
  method: 'GET',
  mode: 'cors',
  headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + accessToken
  }
};

访问 AsyncStorage 时正确使用异步

Using async correctly while accessing AsyncStorage

javascript

fetch

react-native

asyncstorage