javascript - 使用 axios 反应原生无法获取承载令牌

Question

我使用来自后端服务器的 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

标签： javascriptreactjsreact-nativeaxios

Answer 1

您可以使用async/awaitwith try/catchwhich 使其更具可读性。此外，您将需要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();
  }
}