React-native: avoid making every authenticated remote call async-CodePudding

I have a react native project that relies on getting credentials from SecureStorage when making authenticated calls to my backend. Unlike with normal react, this is an async process, which means I have to handle the promise every time I need the headers. Since I need to block on getting the credentials every time, but shoudln't/can't force async to sync, this means a lot of unnecessary code (either chaining 'thens' or making remote calls async/await as well). Is there a more elegant way to handle this case?

The two options I can think of are 1.) handle promises every time or 2.) passing in auth headers with global context.

Here is an example of what I have


    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,
            };

CodePudding user response：

You could certainly make this more invisible by using an 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()
  }
}))

Now you can use api in place of axios and it will automatically apply your auth headers on every request