Question

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

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

我可以在我的jwt token实用程序中使用一些帮助来正确读取我的fetch。

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

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;
};

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

读取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等待承诺解决。然后，您可以退回任何需要退回的物品。

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时正确使用异步

2 个答案: