NextJS中axios获取Auth Token：避免重复请求并让后续调用等待

核心思路是用模块级变量存储Token请求的Promise，而非最终的Token字符串。这样当多个请求同时触发getToken时，后续调用会直接等待首次发起的请求Promise完成，不会重复发起新请求。

修改后的代码如下：

// 存储Token请求的Promise，而非最终Token值
let authTokenPromise: Promise<string> | undefined;

async function getToken(): Promise<string> {
    // 如果已有请求Promise，直接等待它完成
    if (authTokenPromise) {
        return authTokenPromise;
    }

    // 首次请求：创建Promise并存储
    authTokenPromise = (async () => {
        try {
            const url = generateUrl(`/api/auth/token`);
            const r = await axios.get(url);
            
            if (r.status === 400) {
                // 用户未登录的处理逻辑，比如抛出错误或返回空值
                throw new Error("用户未登录");
            }
            
            return r.data.token;
        } catch (error) {
            // 请求失败时清空Promise，允许下次调用重新发起请求
            authTokenPromise = undefined;
            throw error; // 抛出错误让调用方处理
        }
    })();

    return authTokenPromise;
}

关键改动说明： #

• 变量类型调整：把原有的authToken字符串变量换成authTokenPromise，存储的是获取Token的Promise对象。
• 避免重复请求：当getToken被多次调用时，只要首次请求的Promise还在pending状态，后续调用都会直接返回这个Promise，等待它完成。
• 错误处理：请求失败时清空authTokenPromise，这样下次调用getToken会重新发起请求，避免一直卡在失败的Promise上。
• 立即执行函数：用立即执行的async函数创建Promise，确保请求逻辑只执行一次，同时能正确捕获错误。

使用方式： #

在需要Token的API请求中，直接await getToken()即可：

async function fetchSomeData() {
    const token = await getToken();
    const response = await axios.get(generateUrl('/api/data'), {
        headers: { Authorization: `Bearer ${token}` }
    });
    return response.data;
}

这样不管多少个请求同时调用fetchSomeData，只会发起一次Token请求，所有请求都会等待这个Token返回后再继续执行。

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