在 fetch 调用之前从 AsyncStorage 读取令牌

Question

在我的ReactNative 应用程序中，我试图想出一个很好的模式来读取我存储在AsyncStorage 中的access_token 并在fetch 调用中使用它。

换句话说，我想创建一个使用某种类型的包装器的模式，以确保fetch 调用始终具有它需要的access_token。所以执行顺序应该总是：

调用 Fetch 调用 -> 从 AsyncStorage 和 Prep Header 获取令牌 -> 执行 Fetch 调用

我想出了以下代码，但看起来我在使用 AsyncStorage 的 Async 部分时遇到了问题，而且我的 fetch 呼叫在没有令牌的情况下发出。

这是我的fetch 电话：

export const someApiCall = (request) => {

   const url = 'https://myapi.com/add';

   return (dispatch) => fetch(url, fetchOptionsPost(request))
        .then((response) => {

            if (response.ok && response.status === 200) {

                // Got data. Dispatch some action

            }
        })
}

在这里，我使用辅助函数来准备标题等。这是fetchOptionsPost() 的样子：

export const fetchOptionsPost = (request) => {

    getAccessToken()
        .then(token => {

            return {
                method: 'POST',
                mode: 'cors',
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": "Bearer " + token
                },
                body: JSON.stringify(request)
            }
       });
};

getAccessToken() 函数只是从AsyncStorage 读取它，如下所示：

export const getAccessToken = async () => {

    return await AsyncStorage.getItem("access_token");
}

这种模式不起作用，API 调用在没有令牌的情况下发出。

我还想提一下，如果我在 fetchOptionsPost() 方法中对令牌进行硬编码，一切正常。显然，这里的问题是 fetchOptionsPost() 没有返回任何内容。

我能做些什么来确保我的fetchOptionsPost 中始终有我的令牌？

Answer 1

您可以在someApiCall 函数中添加token 调用。还可以在函数内部创建选项。函数是异步的，所以 fetch 只在获取令牌结果后运行

更新

const fetchOptionsPost = (token) =>{
  return ({
    method: 'POST',
    mode: 'cors',
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + token
    }
  })
}

export const someApiCall = async(request) => {
  const token = await AsyncStorage.getItem("access_token");
  const url = 'https://myapi.com/add';

  fetch(url, fetchOptionsPost(token))
    .then(response=>response.json())
    .then((data)=>{
       // call the dispatch here
      })
}

为什么在主函数内部使用异步

AsyncStorage 只有异步回调。如果您将 AsyncStorage 设置为单独的函数，则应该为这两个函数调用 async。这就是为什么我在父异步函数中添加了 with 并将令牌传递给 fetchOptionsPost

Answer 2

这是我想出的，似乎工作正常。对此代码的任何建议或改进，我仍将不胜感激。

首先，这是我的fetch 调用现在的样子。我将它包裹在 getAccessToken() 函数中，这是一个 async 调用，但因为我使用的是 redux-thunk，所以我能够做到这一点。

export const someApiCall = (request) => {

   const url = 'https://myapi.com/add';

   return (dispatch) => getAccessToken()
        .then(token => {
            fetch(url, fetchOptionsPost(request, token))
                .then((response) => {

                     if (response.ok && response.status === 200) {

                          // Got data. Dispatch some action

                      }
                 })
        })
}

我稍微更改了我现在接受令牌的 fetchOptionsPost() 辅助函数。它现在也更强大了。如果它没有得到一个令牌，它只是省略了标题中的Authorization 部分。我选择了这种方法，因为对我的 API 后端的某些调用不需要身份验证。 isValidString() 也是我创建的另一个帮助验证函数，以确保我得到一个有效的字符串。它根据输入的字符串值返回TRUE 或FALSE 响应：

export const fetchOptionsPost = (data, token = null) => {

    if (isValidString(token)) {

        return {
            method: 'POST',
            mode: 'cors',
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer " + token
            },
            body: JSON.stringify(data)
        }
    } else {

        return {
            method: 'POST',
            mode: 'cors',
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        }
    }
};

最后，getAccessToken() 函数并没有真正改变，但它是：

export const getAccessToken = async () => {

    return await AsyncStorage.getItem("access_token");
}

正如我所说，如果有任何关于进一步改进此代码的 cmets 或建议，我将不胜感激。

希望这对其他人有用。

Answer 3

使用 Async 和 await 方法并在每次调用之前获取令牌。

async ()=>{
let token =await getTokenFromLocal();
return (dispatch) => fetch(url, fetchOptionsPost(request))
        .then((response) => {

            if (response.ok && response.status === 200) {

                // Got data. Dispatch some action

            }
        })
}