Question

我正试图在下面的例子中使用promise。我正在学习诺言，但我的第一个例子不起作用。它打印出“承诺不起作用”。

现在，我所知道的是hide（）函数需要400ms来为foo赋值。这就是ajax调用无法获取数据的原因。所以它不会起作用。

我可以通过在hide的回调中调用ajax来解决这个问题，但是我想用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

您只需要为promise函数创建hide，而您正在为整个代码块创建它。

试试这个

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"
        });
    });
});

Answer 2

由于$.ajax已经返回一个promise，并且许多jQuery动画类型方法（包括$.hide）都可以返回一个promise，您的代码可以按如下方式重写

var res;
$("p").hide()
.promise() // returns a promise that resolves when hide finishes
.then(function() {
    return "YOLO";
})
.then(function(foo) {
    return $.ajax({
        url: 'api.php',
        type: 'post',
        data: 'name='+foo,
        success: function(result){
            res=result;
        }
    })
})
.then(function(result) {
    console.log("The PHP response is: ", result);
}, function(err) {
    console.log(err); // Error: "It broke"
});

但请注意，hide中的回调是多余的，因为您无论如何都可以在ajax调用中使用'YOLO'！

还要注意，在$.ajax之后的.then中的结果是一个数组，其中[0]是你在成功回调中得到的结果，[1]是ajax调用的textStatus，[2] ]是jqXHR对象 - 即这些是success: function(result, textStatus, jqXHR)的三个回调参数，除了它们在一个数组中，因为.then回调只接收一个参数

为什么这个承诺不起作用？

2 个答案: