如何使用fetch函数获取多个数据并同时使用（在嵌套的fetch函数之间传递数据）

（一）问题描述

需要读取多个数据，也就是有多个fetch函数，但是这些数据又需要同时用。由于fetch是异步的，因此每个fetch单独进行是没有办法同时获得数据的，此时有两种可行的方式。

（二）解决方法

1. 使用Promise链

在嵌套的fetch函数中，可以通过返回一个Promise对象来传递数据。在外层fetch函数中，可以通过.then()方法来获取内层fetch函数返回的数据。简单来说就是：

fetch(url1)
    .then((r)=>r.json())
    .then((rjson)=>{
       XXXXX
       return fetch(url2)
                .then((response)=>response.json())
                .then((resjson)=>{
                     XXXXX
               });
})

这样一层套一层fetch...return fetch...

 2. 使用async/await

使用async/await可以使代码更加简洁和易读。在外层的async函数中，可以使用await关键字来等待内层fetch函数的返回结果。

async function fetchData() {
  try {
    const response1 = await fetch(url1);
    const data1 = await response1.json();
    
    // 使用第一个fetch请求的响应数据进行处理
       XXXXX

    // 在这里可以调用第二个fetch请求，并将第一个fetch请求的数据传递给第二个fetch请求
    const response2 = await fetch(url2, {
      method: 'POST',
      body: JSON.stringify(data1)
    });
    const data2 = await response2.json();
    
    // 使用第二个fetch请求的响应数据进行处理
        XXXXX

  } catch (error) {
    // 处理错误
  }
}

fetchData();

参考文章： 如何在嵌套的fetch函数之间传递数据 - 腾讯云开发者社区 - 腾讯云