React-native：避免使每个经过身份验证的远程调用异步

Question

我有一个 React Native 项目，它依赖于在对我的后端进行经过身份验证的调用时从 SecureStorage 获取凭据。与正常的反应不同，这是一个异步过程，这意味着我每次需要 headers 时都必须处理承诺。由于我每次都需要阻止获取凭据，但是 shoudln't/can't force async to sync，这意味着很多不必要的代码（链接 'thens' 或进行远程调用 async/await）。有没有更优雅的方式来处理这种情况？

我能想到的两个选项是 1.) 每次都处理 promises 或 2.) 使用全局上下文传入 auth headers。

这是我的例子


    useFeedFetch = (payload: GetItemsRequest) => {
        // misc state set here

        useEffect(() => {
                const getFeedAsync = async () => {
                    // gets credentials from secure storage
                    let headers = await AuthService.getAuthHeader()
                    axios({
                        method: 'POST',
                        url: requestUrl,
                        headers: headers,
                        data: payload,
                    }).then((res) => {
                    ...
                    }
                  
                }
                getFeedAsync()
            }
            , [payload.page]);
            return {
                loading, error, items, hasMore,
            };

Answer 1

您当然可以使用 Axios interceptor

使其更加隐蔽

// eg api.js

import axios from "axios"
import AuthService from "wherever"

// create a new instance to include your interceptor
export const api = axios.create({
  // baseURL can be handy to shorten your URLs
})

api.interceptors.request.use(async config => ({
  ...config,
  headers: {
    ...config.headers,
    ...await AuthService.getAuthHeader()
  }
}))

现在您可以使用 api 代替 axios，它会在每个请求上自动应用您的身份验证 headers

React-native：避免使每个经过身份验证的远程调用异步

React-native: avoid making every authenticated remote call async

javascript

react-native

axios