基于Axios响应发起二次请求并合并结果的实现问题

原代码问题分析 #

1. 异步请求未完成就执行console.log：data1是Promise对象，并非请求返回的实际数据，直接打印无法获取结果
2. 变量作用域错误：data2定义在第一个请求的then回调内部，外部无法访问
3. 未处理结果合并：第二个请求的then回调未提取所需字段，也未执行合并输出逻辑

修正方案（两种实现方式） #

方式一：使用 async/await（更直观）

async function fetchAndMergeData() {
  try {
    // 发起第一个请求，提取所需字段
    const res1 = await axios.get('https://website.com/json1respon');
    const { status, sn, product } = res1.data.data;

    // 用product作为参数发起第二个请求，提取pbl字段
    const res2 = await axios.get(`https://website2.com/${product}`);
    const { pbl } = res2.data.data;

    // 按期望格式输出合并结果
    console.log(`status : ${status}`);
    console.log(`serial : ${sn}`);
    console.log(`product : ${product}`);
    console.log(`price : ${pbl}`);
  } catch (err) {
    console.error('请求失败:', err);
  }
}

// 执行函数
fetchAndMergeData();

方式二：使用 Promise 链式调用

axios.get('https://website.com/json1respon')
  .then(res1 => {
    const { status, sn, product } = res1.data.data;
    // 携带第一个请求的字段发起第二个请求
    return axios.get(`https://website2.com/${product}`)
      .then(res2 => {
        const { pbl } = res2.data.data;
        // 输出合并结果
        console.log(`status : ${status}`);
        console.log(`serial : ${sn}`);
        console.log(`product : ${product}`);
        console.log(`price : ${pbl}`);
      });
  })
  .catch(err => {
    console.error('请求失败:', err);
  });

说明 #

两种方式都会先完成第一个接口请求，拿到product字段后再发起第二个请求，最后合并两个接口的status、sn、product、pbl字段并按指定格式输出。

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