使用Promise顺序执行JavaScript/jQuery Ajax请求无响应问题排查

嘿，我来帮你排查下这个按顺序执行Ajax步骤却没反应、控制台也没输出的问题——大概率是这些环节出了状况：

1. 执行链压根没启动 #

如果你的代码只是定义了steps数组和stepsToDo顺序，但完全没写触发第一个请求的逻辑，那自然不会有任何动静。比如你写了处理单步请求的函数，但从来没调用它来启动第一步。举个例子，要是用Promise串联步骤，得确保最后调用了类似startFirstStep()的启动代码，而不是只摆着函数定义。

2. Ajax请求本身没正确初始化 #

步骤里的Ajax请求可能配置出问题，导致请求根本没发出去，又因为没加错误监听，控制台连报错都没有：

• 用原生XMLHttpRequest的话，忘了调用xhr.send()——这可是触发请求的关键一步
• 请求的URL、method配置错了，但没设置onerror或onload监听来捕获状态变化
• 可能存在跨域问题，但浏览器的跨域错误有时候会藏在「网络」面板而非「控制台」面板，记得去那看看有没有失败的请求记录

3. 异步步骤的串联逻辑写错了 #

不管是用回调还是Promise来实现顺序执行，逻辑出错都会导致链条中断，甚至完全不触发：

• 用回调的话，没在当前Ajax的onload成功回调里调用下一个步骤的函数——相当于走完一步就停了
• 用Promise的话，没正确返回Promise，或者then里没触发下一个请求，甚至错误被吞了（比如写了空的catch(() => {})，或者某些旧环境下未捕获的Promise错误不会打印到控制台）
  比如错误的Promise写法：

function runStep(step) {
  // 这里没返回Promise！链式调用直接失效
  fetch(step.url).then(res => res.json())
}
// 这样调用根本走不下去
runStep(stepsToDo[0]).then(() => runStep(stepsToDo[1]))

正确的写法得返回fetch的Promise：

function runStep(step) {
  return fetch(step.url).then(res => res.json())
}

4. stepsToDo数组无效 #

检查下stepsToDo是不是空数组，或者里面的元素根本不是steps数组里有效的请求对象——比如引用了不存在的索引，或者元素是undefined，这样执行的时候相当于啥也没做，自然没输出。

5. 错误被静默处理了 #

如果你的代码里加了错误捕获，但捕获后啥也没做（比如catch(() => {})空函数），那即使请求出错，控制台也不会有任何提示。记得在catch块里加上console.error(err)来打印错误信息，这样才能知道问题出在哪。

• 先在启动执行的代码前加console.log('开始执行步骤链')，看看是不是根本没进入执行逻辑
• 在每个Ajax请求的onload、onerror里都加控制台打印，确认请求有没有发出去、有没有收到响应
• 打开浏览器的「网络」面板，看看有没有对应的请求记录——如果连请求都没出现，那就是代码没触发请求；如果有请求但状态异常，那就是请求本身的问题

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