使用 axios 反应原生无法获取承载令牌答案

【问题标题】：React native using axios cant get bearer token使用 axios 反应原生无法获取承载令牌
【发布时间】：2020-05-01 07:09:11
【问题描述】：

我收到一个来自后端服务器的使用 axios 的 api 请求。我想将不记名令牌保存到设备存储或本地存储。但是当我为不记名令牌执行console.log 时，它似乎不起作用，因为我得到的只是一个承诺。

这是我的方法

import {AsyncStorage, Alert} from 'react-native';
export default function login(email,password,setLoading){

   console.log('Loading...')
   setLoading(true)

    axios.post('http://52.74.70.6/api/auth/login',{
       email: email,
       password: password
   },{
       headers:{
        Accept: 'application/json',
        'Content-Type': 'application/json',
       }
   })
    .then((res)=>{
        setLoading(false)
        AsyncStorage.setItem('bearer_token', res.data.bearer_token);
        console.log(AsyncStorage.getItem('bearer_token'))
        console.log('Loading Finished')
    }).catch((err)=>{
        setLoading(false)
        console.log(err)
        AlertErr()
    })
}

我得到的是

Loading...

Promise {
  "_40": 0,
  "_55": null,
  "_65": 0,
  "_72": null,
}

Loading Finished

【问题讨论】：

标签： javascript reactjs react-native axios

【解决方案1】：

您可以将async/await 与try/catch 一起使用，这使其更具可读性。此外，您需要将请求 await 发送到 AsyncStorage，因为它会返回一个承诺。

import { AsyncStorage, Alert } from "react-native";
export default async function login(email, password, setLoading) {
  console.log("Loading...");
  setLoading(true);
  const url = "http://52.74.70.6/api/auth/login";
  const data = {
    email: email,
    password: password,
  };
  const headers = {
    Accept: "application/json",
    "Content-Type": "application/json",
  };
  try {
    const response = await axios.post(url, data, { headers: headers });
    setLoading(false);
    await AsyncStorage.setItem("bearer_token", res.data.bearer_token);
    console.log(await AsyncStorage.getItem("bearer_token"));
    console.log("Loading Finished");
  } catch (err) {
    setLoading(false);
    console.log(err);
    AlertErr();
  }
}

【讨论】：

谢谢你。这是我目前关注的。完成登录后，如何在所有请求中使用 Bearer_token？
好吧，你可以在你的headers 中添加Authorization，就像这样{ headers: {"Authorization" : `Bearer ${token}`} }，token = await AsyncStorage.getItem("bearer_token")。感谢@Vince 的投票。

【解决方案2】：

由于它是“异步”，您是否尝试在它之前添加await

 await AsyncStorage.setItem("bearer_token", res.data.bearer_token);
 console.log(await AsyncStorage.getItem('bearer_token'))

或者只是在你的承诺链中返回承诺


then((res)=>{
        setLoading(false)
        await AsyncStorage.setItem('bearer_token', res.data.bearer_token);
        return AsyncStorage.getItem('bearer_token')
    })
.then(token => console.log('token', token)

【讨论】：

【解决方案3】：

顾名思义，AsyncStorage 是异步的。设置项目和从 AsyncStorage 读取项目都是异步的，因此您无法立即读取插入的结果。根据docs，为了记录它你可以

AsyncStorage.setItem('bearer_token', res.data.bearer_token).then(() => {
    AsyncStorage.getItem('bearer_token').then(console.log)
});

【讨论】：