如何使用 asyncStorage 从本地存储中获取值并返回

Question

我想创建一个方法，从存储在本地存储中的令牌返回身份验证标头，以便可以从许多 ajax 调用它，如下所示：

const fetchUserInfo = (username) => {
  const requestString = apiBaseURL + 'access/user_info/'
  const form = {username: username}

  return axios.post(requestString, form, getAuthHeader())
    .then((Response) => {
      return {
        userInfo: Response.data,
        message: null
      }
    })
    .catch((Error) => {
      return getErrorMessage();
    });
}

在这种情况下，getAuthHeader() 是一种必须从存储在本地存储中的令牌返回正确授权标头的方法，因此它必须使用 asyncStorage 来检索此类令牌。

这是getAuthHeader的代码：

export const getAuthHeader = async () => {
  return await AsyncStorage.getItem('token')
    .then ((token) => {
      return {
        headers: {'Authorization' : 'Token ' + token}
      }
    })
    .catch ((error) => null)
}

问题是getAuthHeader() 没有返回标头，而是返回一些其他对象。我相信我搞砸了asyncStorage 的异步特性，但我不知道如何获得我需要的价值。

Answer 1

是的，您同时使用 async/await 和 .then（本机）。 async/await 已经为您处理了 .then 语法，而您无需这样做。所以你不需要两者都在一起，它是 1 或另一个。以下两个示例。

异步/等待：

export const getAuthHeader = async () => {
  try {
    const token = await AsyncStorage.getItem('token')
    if (!token) { return null }
    return {
        headers: {'Authorization' : 'Token ' + token}
      }
  } catch(error) { return null }

}

原生

export const getAuthHeader = () => {
  return AsyncStorage.getItem('token')
    .then((token) => {
      if (!token) { return null }
      return {
        headers: {'Authorization' : 'Token ' + token}
      }
    })
    .catch ((error) => null)
}

您还需要在您的第一个方法中等待getAuthHeader，否则它将永远无法解析该值：

const fetchUserInfo = async (username) => {
  const requestString = apiBaseURL + 'access/user_info/'
  const form = {username: username}
   
  try {
    const response = await axios.post(requestString, form, await getAuthHeader())
    return {
        userInfo: response.data,
        message: null
    }
  } catch(error) {
    return getErrorMessage();
  }
}