Javascript 承诺待处理答案

【问题标题】：Javascript Promise PendingJavascript 承诺待处理
【发布时间】：2016-01-25 15:11:39
【问题描述】：

我终于理解了 Promise 并实现了它，所有查询数据库的 ajax 请求都在使用它。现在我想展示某种加载进度动画，没什么好看的。

根据找到的 MDN 文档here

他们声明 Promise 处于以下状态之一：

待处理：初始状态，未完成或拒绝。
fulfilled：表示操作成功完成。
rejected：表示操作失败。

我想知道如何利用挂起状态来显示我的动画。

承诺示例：

function functionName(param1,param2,...){
      return new Promise(function (resolve, reject) {

         $.ajax({
               // ajax param here
               success: function (data, status) {
                         resolve(data);
                         return;
                        },
                        error: function (xhr, desc, err) {
                        console.log(xhr);
                        console.log("Details: " + desc + "\nError:" + err);
                        return;
                        }
                });
       });
};

以及使用它的函数；

$(document.body).on("event", "element", function (event) {
        event.preventDefault();
        var data = functionName(param1,param2,...).then(function (response) {
        data = response;
            // handeling data from Promise function
         }, function (error) {
        console.error("ERROR !", error);
        return;
        });

});

所以我想知道我们如何利用待处理状态来显示动画？

【问题讨论】：

stackoverflow.com/questions/19126994/…
github.com/likerRr/jq-ajax-progress
您需要做的就是启动动画，然后在 promise 上使用then 将其关闭。顺便问一下，你能正确缩进你的代码吗？

标签： javascript promise

【解决方案1】：

你可以像下面这样修改你的代码

$(document.body).on("event", "element", function (event) {
    event.preventDefault();
    var data = functionName(param1,param2,...).then(function (response) {
    // End your animation here like hide progress bar        
    data = response;
    // handeling data from Promise function
}, function (error) {
    // End your animation here like hide progress bar        
    console.error("ERROR !", error);
    return;
});
// Start your animation here like show progress bar

【讨论】：