链式调用Axios多请求时遭遇'Info is not defined'错误求助

我来帮你梳理下代码里的问题，一步步解决这个错误：

问题分析 #

你的代码里有几个核心问题导致了"Info is not defined"以及后续的异步逻辑错误：

• 变量未声明：info和summoner都没有用let/const声明，不仅会导致未定义错误，还可能污染全局作用域。
• Promise链式调用错误：第二个.then()你直接执行了axios.get()，而不是传入一个回调函数。这会导致第二个请求在第一个请求还没完成、info还没赋值的时候就发起了，自然会提示info未定义。
• 异步结果无法正确传递到路由：getSummonerId函数是同步执行的，但summoner是通过异步请求获取的，直接res.send(summoner)会拿不到正确的值。

修复后的代码（async/await版本，更直观） #

这里是修正后的完整代码，我会标注关键修改点：

const axios = require('axios'); // 确保你已经引入了axios

// 把请求逻辑封装成异步函数，方便在路由里调用
const fetchSummonerData = async (apiKey) => {
  try {
    // 第一个请求：获取召唤师ID
    const summonerResponse = await axios.get(`https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/bloodstrive?api_key=${apiKey}`);
    const summonerId = summonerResponse.data.id;

    // 第二个请求：用拿到的ID获取详细信息
    const leagueResponse = await axios.get(`https://na1.api.riotgames.com/lol/league/v4/entries/by-summoner/${summonerId}?api_key=${apiKey}`);
    
    return leagueResponse.data;
  } catch (error) {
    // 处理请求错误，比如API密钥无效、召唤师不存在等情况
    console.error('请求出错:', error.response?.data || error.message);
    throw error; // 把错误抛出去，让路由处理
  }
};

let getSummonerId = async (req, res) => { // 改成异步函数
  try {
    const api = '你的API密钥'; // 建议把API密钥放在环境变量里，不要硬编码
    const summonerData = await fetchSummonerData(api);
    res.status(200).send(summonerData);
  } catch (error) {
    res.status(500).send('获取召唤师信息失败');
  }
};

module.exports = { getSummonerId };

关键修改说明 #

1. 使用async/await简化异步逻辑：相比Promise链式调用，async/await更直观，更容易处理顺序执行的异步请求。
2. 正确声明变量：用const声明summonerId等变量，避免未定义错误和全局污染。
3. 封装请求逻辑：把获取数据的逻辑抽成单独的函数，让路由代码更简洁，也方便复用和测试。
4. 错误处理：添加try/catch捕获请求过程中的错误，避免程序崩溃，同时给前端返回合适的错误响应。
5. 路由函数异步化：因为要等待异步请求完成，所以getSummonerId必须改成异步函数，用await等待数据返回后再发送响应。

可选：Promise链式调用修正版本 #

如果坚持要用Promise链式调用的写法，修正后的版本是这样的：

const axios = require('axios');

let getSummonerId = (req, res) => {
  const api = '你的API密钥';
  axios.get(`https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/bloodstrive?api_key=${api}`)
    .then(response => {
      const info = response.data.id; // 声明变量
      // 在这里返回第二个请求的Promise，让链式调用继续
      return axios.get(`https://na1.api.riotgames.com/lol/league/v4/entries/by-summoner/${info}?api_key=${api}`);
    })
    .then(response => {
      const summoner = response.data;
      res.status(200).send(summoner); // 在拿到结果后再发送响应
    })
    .catch(error => {
      console.error('请求出错:', error);
      res.status(500).send('获取召唤师信息失败');
    });
};

module.exports = { getSummonerId };

这个版本的核心是在第一个.then()里返回第二个axios.get()的Promise，这样第二个.then()会等待第二个请求完成后再执行，同时在回调里正确声明变量，并且把响应发送放在最后一个.then()里，确保拿到数据后再返回给前端。

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