javascript - 为什么这个 promise 不起作用？

Question

我尝试在下面的示例中使用 Promise。我正在学习 promise ，但我的第一个例子不起作用。它打印出“Promise did not work”。

现在，我知道 hide() 函数需要 400 毫秒才能为 foo 赋值。这就是为什么 ajax 调用无法获取数据的原因。所以这是行不通的。

我可以通过在 hide 回调中调用 ajax 来解决这个问题，但我想使用 Promise 来解决它(我想这就是使用 Promise 的原因？)。

有什么问题或者这不是 promise 的目的吗？

这是我的代码:

var foo;
    var res;
    var Prom;
    $("button").click(function(){
        Prom = new Promise(function(resolve, reject){
            $("p").hide(function(){
                foo="YOLO";
            });
            $.ajax({
                url: 'api.php',
                type: 'post',
                data: 'name='+foo,
                success: function(result){
                    res=result;
                    resolve(res);
                },
                error: function(){
                    reject("Promise didn't work");
                }
            });

        });
        Prom.then(function(result) {
          console.log("The PHP response is: ", result);
        }, function(err) {
          console.log(err); // Error: "It broke"
        });
    });
});

Answer 1

您只需要为 hide 函数创建一个 promise，而您是为整个代码块创建一个 promise。

试试这个

var foo;
    var res;
    var Prom;
    $("button").click(function(){
        Prom = new Promise(function(resolve, reject){
            $("p").hide(function(){
                foo="YOLO";
                resolve(true);
            });

        });
        Prom.then(function() {
           //once hidden trigger ajax
           $.ajax({
                url: 'api.php',
                type: 'post',
                data: 'name='+foo,
                success: function(result){
                    res=result;
                    // ajax success
                },
                error: function(){
                    // ajax error
                }
            });

        }, function(err) {
          console.log(err); // Error: "It broke"
        });
    });
});