React Native中如何同步导出带JWT的Axios实例？

你可以先创建基础Axios实例，再通过请求拦截器动态注入Token，这样既不用等待AsyncStorage的异步结果再初始化实例，也能保证每次请求都带上最新的Token，同时导出的是普通Axios实例而非Promise。

完整实现代码 #

import Axios from "axios";
import AsyncStorage from "@react-native-async-storage/async-storage";

// 先创建不带Token的基础Axios实例
const axios = Axios.create({
    baseURL: "http://localhost:3000",
});

// 请求拦截器：每次请求前动态添加Token
axios.interceptors.request.use(
    async (config) => {
        const token = await AsyncStorage.getItem("token");
        if (token) {
            config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

// 响应拦截器：处理401未授权错误
axios.interceptors.response.use(
    (response) => response,
    async (error) => {
        if (error.response?.status === 401) {
            // 这里添加401后的逻辑，比如清除Token、跳转到登录页
            await AsyncStorage.removeItem("token");
            // 假设你用的是React Navigation，示例跳转逻辑：
            // navigation.navigate('Login');
        }
        return Promise.reject(error);
    }
);

export default axios;

核心思路说明 #

• 先初始化基础实例：直接创建Axios实例，不用等Token返回，避免导出Promise。
• 请求拦截器动态注入Token：每次发起请求前异步获取Token并添加到请求头，既能保证请求时Token有效，也能适配Token更新后的场景（比如用户刚登录完成）。
• 响应拦截器处理401：捕获未授权错误，执行清除Token、跳转登录等业务逻辑，匹配你的需求。

这种方式完全满足你的要求：导出普通Axios实例、自动附加JWT、处理401错误，且无需依赖顶层await或导出Promise。

内容的提问来源于stack exchange，提问作者Dannomac