如何使用 asyncStorage 和 return 从本地存储中获取值

Question

我想创建一个方法，该方法 return 从存储在本地存储中的令牌进行身份验证 header，以便可以从多个 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() 是一种方法，它必须 return 来自存储在本地存储中的令牌的适当授权 header，因此它必须使用 asyncStorage为了检索这样的令牌。

这是 getAuthHeader 的代码：

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

问题是 getAuthHeader() 不是 returning 一个 header，而是其他一些 object。我相信我弄乱了 asyncStorage 的异步性质，但我不知道如何获得我需要的值。

Answer 1

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

Async/Await:

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

如何使用 asyncStorage 和 return 从本地存储中获取值

How to get a value from local storage with asyncStorage and return it

javascript

react-native

asynchronous

asyncstorage