如何避免 JavaScript 中的 XMLHttpRequest 回调地狱

Question

我需要使用来自两个不同 API 调用的响应来构建我的模型，并且我不想进行嵌套回调。这个想法是进行两个单独的调用，然后等待直到两个调用都响应然后调用模型函数

    let data = null
    let forecast = null
    const dataRequest = new XMLHttpRequest()
    dataRequest.responseType = 'json';
    dataRequest.open('GET', urlData)
    dataRequest.send()
    dataRequest.onload = () => data = dataRequest.response


    const forecastRequest = new XMLHttpRequest()
    forecastRequest.responseType = 'json';
    forecastRequest.open('GET', urlForecast)
    forecastRequest.send()
    forecastRequest.onload = () => forecast = forecastRequest.response
  

setTimeout(
        function () {
          const theModel = model(data, forecast) // data,forecast are null
        }, 0); // this will work if I set the waiting time to 100 instead of 0

问题在于执行顺序与预期不符。 在文档中，明确说明当使用 setTimeout 方法或任何其他异步调用时，该函数将被插入事件队列中。因此，在我的应用程序中，第一个 onload 方法将首先插入到事件队列中，然后将插入第二个 onload，最后，setTimeout 将是最后一个插入的方法（所以我希望它是最后一个也被执行）。但是执行顺序显示了一些不同：setTimeout 函数将首先执行，即使 setTimeout 是队列中的最后一个并且它应该是最后一个要执行的函数 https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

Answer 1

所以你想一个接一个地做？为什么不在第一次 onload 事件后发出第二次请求，在第二次 onload 后发出模型？

let data = null
let forecast = null
let theModel = null

const dataRequest = new XMLHttpRequest()

dataRequest.responseType = 'json';
dataRequest.open('GET', urlData)
dataRequest.send()
dataRequest.onload = () => {

        data = dataRequest.response;

        const forecastRequest = new XMLHttpRequest()
        forecastRequest.responseType = 'json';
        forecastRequest.open('GET', urlForecast)
        forecastRequest.send()
        forecastRequest.onload = () => {

                forecast = forecastRequest.response;

                theModel = model(data, forecast);

}
}