在Promise的.then中循环替换字符串子串，外部无法获取修改后的值

问题本质 #

你碰到的是JavaScript异步代码的执行顺序问题：fetchData是异步函数，返回的Promise会在同步代码执行完之后才触发.then里的替换逻辑。而你外部的console.log(text)是同步代码，会在所有异步回调执行前就运行，所以拿到的自然是原始字符串。

解决方案1：串行处理（保证替换顺序，避免冲突） #

如果你的替换操作需要按顺序执行（比如子串有重叠，或者后替换依赖前一次的结果），用reduce把异步操作串起来：

const matches = text.match(regex);
if (matches) {
  // 从原始文本开始，逐个处理每个匹配项的异步替换
  Promise.resolve(text)
    .then(initialText => {
      return matches.reduce((prevPromise, tlfUri) => {
        return prevPromise.then(updatedText => {
          return fetchData(tlfUri).then(str => {
            // 有替换内容才修改，否则返回原文本
            return str !== "" ? updatedText.split(tlfUri).join(str) : updatedText;
          });
        });
      }, Promise.resolve(initialText));
    })
    .then(finalText => {
      console.log(finalText); // 这里拿到最终替换后的文本
      // 后续业务逻辑放在这里处理最终文本
    })
    .catch(err => console.error('请求失败:', err));
} else {
  console.log(text); // 无匹配项直接输出原文本
}

解决方案2：并行处理（效率更高，适合无依赖的替换） #

如果所有要替换的子串互不重叠，替换顺序不影响结果，可以先并行请求所有替换内容，再一次性替换：

const matches = text.match(regex);
if (matches) {
  // 并行请求所有替换内容，同时保存对应的原串
  Promise.all(matches.map(tlfUri => 
    fetchData(tlfUri).then(str => ({ tlfUri, str }))
  ))
  .then(replacements => {
    let finalText = text;
    replacements.forEach(({ tlfUri, str }) => {
      if (str !== "") {
        finalText = finalText.split(tlfUri).join(str);
      }
    });
    console.log(finalText); // 最终替换后的文本
  })
  .catch(err => console.error('请求失败:', err));
} else {
  console.log(text);
}

关键要点 #

不管用哪种方式，核心都是等所有异步替换操作全部完成后，再去读取最终的文本，不能在异步回调没执行完时就同步打印。

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