Jquery ajax调用then函数

Posted 2021-05-03

所以我需要两个ajax调用来获取所有数据。我正在使用jQuery的ajax调用来实现这一目标。但后来我对执行顺序感到有点困惑。这是我有问题的代码：

$.ajax({
type: "GET",
url: "/api/data",
dataType: "json"
}).then(function (data) {
   console.log("I am the first")//correct
}).then(function () {
   //second ajax
    $.ajax({
    type: "GET",
    url: "/api/lifecyclephase",
    dataType: "json"
    }).then(function (data) {
       console.log("I am the second")//third
    })
 }).then(function () {
     console.log("I am the third")//second
 })

输出是

I am the first
I am the third
I am the second

在继续之前，then不应该让第二个ajax完成它的工作吗？

正确的：

$.ajax({
  type: "GET",
  url: "/api/data",
  dataType: "json"
}).then(function (data) {
  console.log("I am the first")
}).then(function () {
  $.ajax({
    type: "GET",
    url: "/api/lifecyclephase",
    dataType: "json"
  }).then(function () {
    console.log("I am the second")
  }).then(function(){
    console.log("I am the third")
  })
})

答案

在有问题的代码中，你只是缺少一个return。

$.ajax({
    type: "GET",
    url: "/api/data",
    dataType: "json"
}).then(function (data) {
    console.log("I am the first");
}).then(function () {
    return $.ajax({
    ^^^^^^
        type: "GET",
        url: "/api/lifecyclephase",
        dataType: "json"
    }).then(function (data) {
        console.log("I am the second");
    });
}).then(function () {
    console.log("I am the third");
});

没有return，没有任何东西可以告知内部承诺的退出的外部承诺链，因此外链不等待内部承诺在进入第三阶段之前解决。

另一答案

“第二个”$.ajax在第二个.then内被初始化，但$.ajax没有被其他任何东西链接 - 解释器初始化请求就是这样，所以当第二个.then到达时，下一个.then（third）立即执行。

尝试returning第二个Promise - 随后的.then只会等待Promise来解决，如果Promise由之前的.then返回：

.then(function (data) {
   console.log("I am the first")//correct
})
.then(function () {
  //second ajax
  return $.ajax({
  // ...