React Native 异步存储解析

Question

我正在尝试访问一个 rest api 端点，它需要您向它发送一个带有 React Native 的令牌。出于开发目的，我将其存储在包装在 APIToken class 中的异步存储中，使用两种方法设置或获取令牌和 returns 令牌。

import {AsyncStorage} from 'react-native';

class APIToken {
    constructor(){}
    async get(){
        try {
            const token = await AsyncStorage.getItem('api_token');
            if (token !== null) {
              // We have data!!
              console.log(token);
              return token
            }
          } catch (error) {
            // Error retrieving data
          }
          //return null
    }
    async set(token){
        try {
            await AsyncStorage.setItem('api_token', token);
            return token
          } catch (error) {
            // Error saving data
          }
          //return null
    }
}

export default APIToken

所以我正在使用异步函数，希望我可以将密钥解析为字符串值而不是承诺。当我使用这些函数调用 api 时，我在控制台中得到正确返回的密钥，但在 header 中，它 returns 作为承诺。

const key = function() {
    const k = (new APIToken()).get()
    return k
  }


const api = axios.create({
    baseURL: Config.API_URL_V1,
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + key(),
        'Cache-Control': 'no-cache'
    }
  });

控制台从 ApiToken 返回的内容 class

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9uZXQtYXBwMS5oZXJva3VhcHAuY29tXC9hcGlcL3YxXC9sb2dpbiIsImlhdCI6MTU2NDkzMTcxMywiZXhwIjoxNTY0OTM1MzEzLCJuYmYiOjE1NjQ5MzE3MTMsImp0aSI6InpUMzV5NU43Q2NGejRTanciLCJzdWIiOiI1ZDMzNTcwNDgwMmRmMDAwMDc2YmFkOTciLCJwcnYiOiI4N2UwYWYxZWY5ZmQxNTgxMmZkZWM5NzE1M2ExNGUwYjA0NzU0NmFhIn0.nhDmwYWS5NaGifg-atwEw4DwUNvvpv-I_Ntw5L9kmCc

调用中的授权header：

Authorization: "Bearer [object Object]"

我已经尝试了很多不同的方法，但一直无法获得密钥，所以我可以在我的 api 调用中使用它，而不会因为密钥没有正确返回而得到 403。任何帮助都会很棒。

Answer 1

你在 key 函数和 api 函数中错误，当调用 key 时你不使用 await 并且在 key 时调用 get token 你也不使用 await 。您需要将这两个函数都转换为异步或使用 promise。下面的代码将解决你的问题。请尝试一下。

const key = async function () {
    const apiToken = new APIToken();
    const k = await apiToken.get();
    return k;
}


const api = async function () {
    var token = await key();
    return axios.create({
        baseURL: Config.API_URL_V1,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + token,
            'Cache-Control': 'no-cache'
        }
    });
}

async function fetchEvents() {
    let request = await api();
    return request.get(Config.API_URL_V1 + 'events').catch((error) => console.log(error.response))
}

React Native 异步存储解析

React Native Async Storage resolve

es6-promise

react-native

asyncstorage

axios