使用React Hooks与Axios按语言条件调用API的实现问题

现有代码的核心问题 #

• 条件判断语法错误：language === 'ru' || 'en' 的写法逻辑不成立，JS会将'en'这类非空字符串判定为布尔真值，导致第一个判断分支永远触发，第二个分支永远无法执行
• 第二套逻辑的触发条件遗漏了需求指定的ar语言
• 第一套请求逻辑缺少错误捕获，请求异常时无法处理
• 并行请求的写法可以简化，代码冗余度可降低

修正后可运行的代码 #

// 提前定义语言分组，后续维护时直接修改数组即可
const FIRST_GROUP_LANGS = ['ru', 'en', 'fr', 'de', 'tr', 'it', 'es']
const SECOND_GROUP_LANGS = ['zh', 'ko', 'ar']

const reqTranslate = () => {
  // 用数组includes简化判断逻辑
  if (FIRST_GROUP_LANGS.includes(language)) {
    Promise.all([requestTranslate, requestDictionary])
      .then(([translateRes, dictionaryRes]) => {
        // 直接解构得到两个请求的返回值，无需使用axios.spread
        const responseOne = translateRes?.data?.text?.[0];
        const responseTwo = dictionaryRes?.data?.def?.[0]?.tr;
        const responseThree = dictionaryRes?.data?.def?.[0]?.pos;
        const responseFour = dictionaryRes?.data?.def?.[0]?.ts;
        const responseFive = dictionaryRes?.data?.def?.[0]?.text;
        const responseSix = dictionaryRes?.data?.def?.[0]?.tr;

        console.log(responseOne, responseTwo);
        setTextresult(responseOne);
        setSynTransLang(responseTwo);
        setPos(responseThree);
        setTs(responseFour);
        setTxt(responseFive);
        setMapValue(responseSix);
      })
      .catch(errors => {
        console.error('请求异常：', errors);
      })
  } else if (SECOND_GROUP_LANGS.includes(language)) {
    Promise.all([requestTranslate, requestDictionary])
      .then(([translateRes]) => {
        const responseOne = translateRes?.data?.text?.[0];
        console.log(responseOne);
        setTextresult(responseOne);
      })
      .catch(errors => {
        console.error('请求异常：', errors);
      })
  }
}

优化说明 #

• 用数组存储语言分组，后续调整支持的语言时只需要修改数组内容，不需要修改判断逻辑，可维护性更高
• 用原生Promise.all + 数组解构代替axios.all + axios.spread，语法更通用，可读性更强
• 两个分支都补充了错误捕获逻辑，避免异常无提示
• 修复了判断逻辑错误和语言缺失的问题

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