Axios请求依赖问题：第二个请求无法获取access_token

我需要执行两个请求，第二个请求依赖第一个请求返回的access_token。我尝试了如下代码：

let access_token = '';

var config = {
    method: 'post',
    url: <url1>,
    data: <data>,
    headers: {
      header1: <header>
    }
}

axios(config).then((response: any) => {
    access_token = response.access_token;
})

config = {
    method: 'post',
    url: <url2>,
    headers: {
      Authorization: `Bearer ${access_token}`
    }
}

axios(config);

通过开发者工具Network面板可见第一个请求已返回access_token，但第二个请求执行时access_token为空，导致请求失败。请问问题出在哪里？

问题核心在于axios请求的异步特性：

• 第一个axios(config)是异步操作，它的then回调函数不会立即执行，要等第一个请求完成、拿到响应后才会触发。
• 但你当前代码里，第二个axios(config)是在第一个请求发送后同步执行的，此时access_token还没被then回调赋值，仍然是初始的空字符串，所以第二个请求的Authorization头无效。

修复方案1：将第二个请求放入第一个请求的then回调内 #

确保第二个请求在拿到access_token后再执行：

let access_token = '';

var config = {
    method: 'post',
    url: <url1>,
    data: <data>,
    headers: {
      header1: <header>
    }
}

axios(config).then((response: any) => {
    access_token = response.access_token;
    // 第二个请求放在此处，保证依赖数据已赋值
    const secondConfig = {
        method: 'post',
        url: <url2>,
        headers: {
          Authorization: `Bearer ${access_token}`
        }
    }
    axios(secondConfig);
})

修复方案2：使用async/await语法（更简洁易读） #

用异步函数让代码按顺序执行：

async function fetchData() {
    // 等待第一个请求完成，拿到响应
    const firstResponse = await axios({
        method: 'post',
        url: <url1>,
        data: <data>,
        headers: {
          header1: <header>
        }
    });
    const access_token = firstResponse.access_token;
    
    // 执行第二个请求
    await axios({
        method: 'post',
        url: <url2>,
        headers: {
          Authorization: `Bearer ${access_token}`
        }
    });
}

// 调用异步函数
fetchData();

另外注意：你原代码中第一个config对象的data属性后缺少逗号，会导致语法错误，修复方案已补上该逗号。

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