如何将首个API调用获取的data.id传递至第二个函数？

我尝试利用第一次API调用获取的信息发起新的API调用，但无法将第一个函数中的data.id值传递到第二个函数。当前代码执行时，sumId返回undefined，其余功能均正常，相关代码如下：

const name = "ffsbroman"
const API_KEY = ""
let url = "https://euw1.api.riotgames.com/lol/summoner/v4/summoners/by-name/" + name + "?api_key=" + API_KEY;
let sumId;
let sumIdUrl;

async function getApi() {
  try {
    const response = await fetch(url);
    const data = await response.json();

    renderHTml(data);
  } catch (error) {
    console.log("Something went wrong trying to fetch API");
  }
}

getApi();

function renderHTml(data) {
  const container = document.querySelector('.container');
  const div = document.createElement('div');
  const sumName = document.createElement('h2');
  const sumLevel = document.createElement('h3');
  const sumIcon = document.createElement('img');
  sumName.textContent = data.name;
  sumLevel.textContent = "Level: " + data.summonerLevel;
  sumIcon.setAttribute('src', 'https://ddragon.leagueoflegends.com/cdn/13.6.1/img/profileicon/' + data.profileIconId + '.png');
  div.appendChild(sumName);
  div.appendChild(sumLevel);
  div.appendChild(sumIcon);
  container.appendChild(div);
  console.log(data.name)
  console.log(data.summonerLevel)
  console.log(data)
  console.log(data.id)

  sumId = data.id;
  sumIdUrl = "https://euw1.api.riotgames.com/lol/champion-mastery/v4/champion-masteries/by-summoner/" + sumId + "?api_key=" + API_KEY;
}

async function getChampMast() {
  const sumIdUrl = "https://euw1.api.riotgames.com/lol/champion-mastery/v4/champion-masteries/by-summoner/" + sumId + "?api_key=" + API_KEY;
  try {
    const response2 = await fetch(sumIdUrl);
    const champMast = await response2.json();

    renderChampMast(champMast);
  } catch (error) {
    console.log("Something went wrong trying to fetch API");
  }
}

getChampMast();

function renderChampMast(champMast) {
  console.log(champMast)
}

问题根源 #

这是异步执行顺序导致的：

• getApi()是异步函数，内部的fetch请求需要等待网络响应，sumId = data.id要等API返回数据后才会执行
• 你直接同步调用了getChampMast()，此时sumId还未被赋值，所以是undefined

修复方案 #

方案1：在renderHtml中触发第二个API调用 #

当sumId赋值完成后，再调用getChampMast()，确保数据已存在：

function renderHTml(data) {
  // 保留原有的DOM渲染代码
  
  sumId = data.id;
  sumIdUrl = "https://euw1.api.riotgames.com/lol/champion-mastery/v4/champion-masteries/by-summoner/" + sumId + "?api_key=" + API_KEY;
  
  // 在这里调用第二个API函数
  getChampMast();
}

同时删除全局作用域中的getChampMast()调用。

方案2：用async/await串联异步操作 #

将两个请求按顺序封装，确保第一个API完成后再执行第二个：

async function fetchAllData() {
  try {
    // 第一步：获取召唤师信息
    const response = await fetch(url);
    const data = await response.json();
    renderHTml(data);
    
    // 第二步：获取英雄熟练度数据
    await getChampMast();
  } catch (error) {
    console.log("请求出错:", error);
  }
}

// 只调用这个函数即可
fetchAllData();

删除原有的getApi()和getChampMast()单独调用。

优化建议：避免全局变量传递数据 #

直接将sumId作为参数传给getChampMast()，降低代码耦合度：

function renderHTml(data) {
  // 保留原有的DOM渲染代码
  
  // 直接传入data.id
  getChampMast(data.id);
}

async function getChampMast(sumId) {
  // 使用传入的参数，无需依赖全局变量
  const sumIdUrl = `https://euw1.api.riotgames.com/lol/champion-mastery/v4/champion-masteries/by-summoner/${sumId}?api_key=${API_KEY}`;
  try {
    const response2 = await fetch(sumIdUrl);
    const champMast = await response2.json();
    renderChampMast(champMast);
  } catch (error) {
    console.log("请求出错:", error);
  }
}

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