如何实现依赖前序响应的连续fetch()请求？异步传参问题

要处理依赖前序异步结果的连续请求，核心是等待第一个异步函数完成并拿到返回值，再传入第二个函数。你之前的问题在于没有正确处理fetchPuuid返回的Promise，以下是两种可行方案：

方案一：用async主函数串联操作 #

创建一个入口函数，在里面用await等待fetchPuuid的结果，再传给fetchMatchByPuuid：

var gameName = 'Death in Taxes';
var tagLine = 'NA1';

// 主入口函数，必须是async才能用await
async function fetchData() {
  try {
    // 等待fetchPuuid返回puuid
    const puuid = await fetchPuuid(gameName, tagLine);
    // 确保puuid存在再调用下一个请求
    if (puuid) {
      await fetchMatchByPuuid(puuid);
    }
  } catch (error) {
    console.error('流程出错:', error);
  }
}

// 调用主函数
fetchData();

// 你的fetchPuuid函数（修改为局部变量返回，避免全局污染）
async function fetchPuuid(gameName, tagLine){
  const apiURL = `https://americas.api.riotgames.com/riot/account/v1/accounts/by-riot-id/${gameName}/${tagLine}`;
  const queryParams = {
    api_key: 'RGAPI-c6450472-ed11-4c53-baa0-f6f8d739cdf5'
  };
  const queryString = new URLSearchParams(queryParams).toString();
  const fullUrl = `${apiURL}?${queryString}`;

  try{
    const response = await fetch(fullUrl);
    if(!response.ok){
      throw new Error('Could not fetch puuid');
    }
    const data = await response.json();
    // 直接返回puuid，不用全局变量
    return data.puuid;
  }
  catch(error){
    console.error(error);
    // 抛出错误让上层捕获，避免后续无效执行
    throw error;
  }
}

// 你的fetchMatchByPuuid函数
async function fetchMatchByPuuid(puuid){
  const apiURL = `https://americas.api.riotgames.com/lol/match/v5/matches/by-puuid/${puuid}/ids`;
  const queryParams = {
    api_key: 'RGAPI-c6450472-ed11-4c53-baa0-f6f8d739cdf5'
  };
  const queryString = new URLSearchParams(queryParams).toString();
  const fullUrl = `${apiURL}?${queryString}`;

  try{
    const response = await fetch(fullUrl);
    if (!response.ok){
      throw new Error('Could not fetch Match IDs');
    }
    const data = await response.json();
    console.log(data);
    return data;
  }
  catch(error){
    console.error(error);
    throw error;
  }
}

方案二：用Promise链式调用 #

如果不想用async/await，也可以用.then()链式处理：

var gameName = 'Death in Taxes';
var tagLine = 'NA1';

fetchPuuid(gameName, tagLine)
  .then(puuid => {
    if (puuid) {
      return fetchMatchByPuuid(puuid);
    }
  })
  .catch(error => {
    console.error('流程出错:', error);
  });

// 保持你的两个异步函数不变（注意fetchPuuid要正确返回或抛出错误）
async function fetchPuuid(gameName, tagLine){
  // ... 原代码，确保返回data.puuid，错误时throw
}

async function fetchMatchByPuuid(puuid){
  // ... 原代码
}

关键注意点 #

• await必须在async函数内：不能在全局作用域直接用await fetchPuuid()，必须包裹在async函数里。
• 避免全局变量：你之前用了全局的puuid，容易引发意外问题，直接让函数返回值更安全。
• 错误传递：在fetchPuuid的catch块里要重新抛出错误，这样上层能捕获并终止后续无效操作。

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