jquery 如何确保在其他 AJAX promise完成之前不执行JavaScript函数

igetnqfo  于 2023-06-29  发布在  jQuery
关注(0)|答案(3)|浏览(124)

我有两个JavaScript函数调用 AJAX promise来填充字段。像这样:

var functionA = function () {
   //Prepare data for ajax service call
   service.getDataA()
      .then((data) => $("#inputA").val(data));
}
var functionB = function () {
   //Prepare data for ajax service call
   service.getDataB()
      .then((data) => $("#inputB").val(data));
}

这里是 AJAX

var getDataA  = function () {
    return $.ajax({
        type: "GET",
        url: url,
        data: data,
    });
};

var getDataB  = function () {
    return $.ajax({
        type: "GET",
        url: `url,
        data: data,
    });
};

到目前为止,一切顺利。
问题是,我有第三个函数,函数C,它依赖于函数A和函数B的完成。我需要在functionA和functionB都完成时执行functionC。我尝试了几种方法来实现这一目标,但都没有成功。
我该怎么做才能做到?

When functionA and functionB are done
.Then functionC.
62lalag4

62lalag41#

你可以使用Promise.all,例如:

var functionA = function () {
   return service.getDataA()
      .then((data) => $("#inputA").val(data));
}

var functionB = function () {
   return service.getDataB()
      .then((data) => $("#inputB").val(data));
}

var functionC = function () {
    // functionC logic here
}

Promise.all([functionA(), functionB()])
    .then(functionC)
    .catch((err) => {
        // Handle error
        console.error(err);
    });
vlju58qv

vlju58qv2#

正如丹尼尔在评论中所说。Promise.all是最好的解决方案。如果您由于某种原因无法使用它,则可以使用以下模式:

// some globally-accessible state
const returnStates = {
  hasA: false,
  hasB: false,
  hasC: false,
};

const tryC = () => {
  if (!returnStates.hasA || !returnStates.hasB) return

  service.getDataC();

  returnStates.hasC = true;
};

getDataA.then(() => {
  returnStates.hasA = true;

  tryC();
});

getDataB.then(() => {
  returnStates.hasB = true;

  tryC();
});

您可以调整它以不同的方式包含returnStates,将其 Package 在tryC中,或者使用全局状态管理工具。这基本上模仿了redux-thunk,而没有redux或形实转换程序。

brc7rcf0

brc7rcf03#

保证。all()是那个家伙,大概是这样的:

var promise1 = new Promise(function (resolve, reject) {
  //your Function1
});

var promise2 = new Promise(function (resolve, reject) {
  //your Function2
});

Promise.all([promise1, promise2])
   .then(res => {
    //your Function3
})
.catch(error => console.log(error))

相关问题