使用 axios 反应本机无法获得不记名令牌

Question

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

这是我的方法

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

Answer 1

您可以将async/await与try/catch一起使用，使其更具可读性。 此外，您需要await对AsyncStorage的请求，因为它返回 promise。

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

Answer 2

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

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

或者只返回 promise 链中的 promise

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

Answer 3

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

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