jQuery forEach循环内Promise链式调用执行顺序异常问题

• forEach 是同步遍历方法，本身不支持异步等待，执行时会瞬间跑完所有迭代的同步代码，把所有迭代里的getLandingPageName请求一次性全部发出，循环本身在几毫秒内就执行完毕，根本不会等待前一个Promise状态变更再进下一轮。
• 你观察到的「等forEach遍历完所有项才开始执行第二个函数」是错觉：本质是所有getLandingPageName的异步请求在循环遍历阶段就全部发出去了，等这些请求陆续异步返回时，循环早就跑完了，才会触发对应then里的createLandingPage逻辑。
• 额外语法问题：你贴的代码里getLandingPageName函数定义漏了末尾的闭合大括号，会直接触发语法错误，需要先补上。

根据你需要的执行逻辑选对应写法即可：

方案1：单link内顺序执行，多link间并行 #

如果不需要等上一个link全流程走完再处理下一个，只需要保证单个link一定是先拿名称、再填表单、最后创建落地页，只需要修正Promise链，避免错误被吞即可：

$('#btn_multi_lp').on('click', () => {
  let links = findLpURL(HTML) || getHrefLink(HTML);

  if (links) {
    let linksByNbr = countOccurrences(links);

    Object.keys(linksByNbr).forEach((link) => {
      let formLp = new FormData();
      formLp.append('campaign_id', $('#campaign_id').val())
      formLp.append('crea_id', 80);

      getLandingPageName($campaignName)
        .then((dataLp) => {
          formLp.append('lp_name', dataLp.name);
          formLp.append('validated_lp', link);
          // 记得return嵌套的Promise，保证链路可以传递错误
          return createLandingPage(formLp);
        })
        .then(() => {
          formLp.delete('validated_lp');
          formLp.delete('lp_name');
        })
        .catch((err) => {
          alert(err);
        })
    });
  }
});


function getLandingPageName(campaignName) {
  return new Promise((resolve, reject) => {
    $.ajax({
      type: 'POST',
      url: "{{ route('account-creative-getlandingpagename') }}",
      data: {
        campaignName: campaignName,
        _method: 'POST'
      },
      dataType: "json",
      success: (data) => resolve(data),
      error: (jqXHR) => {
        reject(`\nstatus code ${jqXHR.status}\n details: ${jqXHR.responseText}`);
      }
    });
  });
// 补全原来漏写的闭合大括号
}

function createLandingPage(formData) {
  return new Promise((resolve, reject) => {
    $.ajax({
      type: 'POST',
      url: "{{ route('account-lp-create') }}",
      data: formData,
      dataType: "json",
      cache: false,
      contentType: false,
      processData: false,
      success: (data) => resolve(data),
      error: (jqXHR) => {
        reject(`creativeInstall : \nstatus code ${jqXHR.status} \ndetails: ${jqXHR.responseText}`);
      }
    });
  });
}

这种写法下所有link的getLandingPageName请求会一次性发出，每个请求返回后立刻执行对应link的创建逻辑，整体执行速度最快。

方案2：所有link按顺序串行执行 #

如果你需要等上一个link的「拿名称→创建落地页」全流程跑完，再处理下一个link，就不能用forEach，要换成支持异步等待的for...of循环配合async/await：

$('#btn_multi_lp').on('click', async () => {
  let links = findLpURL(HTML) || getHrefLink(HTML);

  if (links) {
    let linksByNbr = countOccurrences(links);
    const linkList = Object.keys(linksByNbr);
    
    for (const link of linkList) {
      try {
        let formLp = new FormData();
        formLp.append('campaign_id', $('#campaign_id').val())
        formLp.append('crea_id', 80);

        const dataLp = await getLandingPageName($campaignName);
        formLp.append('lp_name', dataLp.name);
        formLp.append('validated_lp', link);

        await createLandingPage(formLp);
        formLp.delete('validated_lp');
        formLp.delete('lp_name');
      } catch (err) {
        alert(err);
        // 若需要某个link报错后终止整个流程，取消下方注释即可
        // break;
      }
    }
  }
});

// 下方两个Promise函数的修正和方案1一致，记得补上getLandingPageName漏写的闭合大括号即可

这种写法严格按遍历顺序处理每个link，不会出现多个请求同时发的情况，适合接口有频率限制、或者需要严格按顺序创建的场景。

• 不要在异步回调里复用外层的可变变量，你现在的写法里每个迭代都单独创建了formLp实例，这点是对的，不会出现数据串扰。
• 写Promise链的时候记得return嵌套的Promise，不然外层的catch捕获不到嵌套请求的错误，容易出现静默失败。

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