React中使用Axios等待Promise完成以获取JWT令牌的方法

1. 优化fetchJwtToken函数，避免混用await与.then() #

把链式调用的.then()改成await写法，同时直接返回获取到的token，后续调用更灵活：

fetchJwtToken = async () => {
    try {
        const res = await axios.post(
            'http://localhost:8080/authenticate',
            {
                username: 'username',
                password: 'password'
            }
        );
        console.log("JWT token fetch");
        console.log(res);
        const token = res.data.jwt;
        this.setState({ jwtToken: token });
        return token;
    } catch (err) {
        console.error("获取token失败:", err);
        throw err;
    }
}

2. 修改processImage为异步函数，等待fetchJwtToken执行完成 #

fetchJwtToken是async函数，调用时必须加await才能等待它完成：

processImage = async () => {
    try {
        const token = await this.fetchJwtToken();
        console.log(token);
        // 这里直接用返回的token做后续接口调用即可
        // 示例：await axios.get('/api/image', { headers: { Authorization: `Bearer ${token}` } });
    } catch (err) {
        console.error("处理图片流程失败:", err);
    }
}

原写法失效的原因 #

• 调用fetchJwtToken()时没加await，函数会直接返回pending状态的Promise，代码会立刻往下执行，此时this.state.jwtToken还没更新。
• 另外setState本身是异步操作，就算fetchJwtToken执行完，state的更新也不会立刻生效，直接log state大概率拿不到最新值。让fetchJwtToken返回token，可以绕过state异步的问题，直接使用返回值。

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