Ajax承诺是在同一时间执行而不是按顺序执行

Question

我使用的应用程序向服务器发送一些请求。

function createAjaxCall(data, done, fail) {
   return $.post("process_watch.php", data).then(done).fail(fail);
}

和

function step1() {
   return createAjax({ }, function(result) { console.log(result); return result; }, function() { });
}

function step2(res) {
   return createAjax({ }, function(result) { console.log(result); return result; }, function() { });
}

...

有些请求需要一段时间（让我们假设我在PHP中使用sleep(1500);）如果我这样做：

然后

step1().then((data) => step2(data)).then((data) => step3(data))将同时执行。

出了什么问题？

Answer 1

javascript中没有任何并行的内容。它是一种并发语言。你写的将是连续执行的（一个接一个）。它将以 1500 * 3 ms结束（假设每个花费500毫秒）

step1().then((data) => step2(data)).then((data) => step3(data))

要使它们同时执行（a.k.a js中的并行），您应该执行以下操作。所有的调用都将被发送以获取数据。当所有这些调用解析后，将转到then-catch链。它将花费或多或少1500毫秒完成（假设每个需要500毫秒）

Promise.all([step1(),step2(),step3()]).then().catch()

Answer 2

您可以使用异步功能

async函数返回Promise，因此您可以等待同步执行结束，then可以使用返回的结果。

查看此代码段

function step1() {
  return new Promise((resolve) => {
    setTimeout(function() {
      resolve(1);
    }, 1000);
  });
}

function step2() {
  return new Promise((resolve) => {
    setTimeout(function() {
      resolve(2);
    }, 1000);
  });
}

function step3() {
  return new Promise((resolve) => {
    setTimeout(function() {
      resolve(3);
    }, 1000);
  });
}

async function process() {
  var one = await step1();
  var two = await step2();
  var three = await step3();

  /*if (some error) {
    return Promise.reject('Some error!');
  }*/

  return `RESULT: ${one} - ${two} - ${three}`
}

console.log('Waiting results...');
process().then((result) => {
  console.log(result);
  console.log('DONE!');
}).catch((error) => {
  console.log(error);
});

资源

• async function
• Promise.reject()