Javascript承诺以相反的顺序加载

Question

我正在尝试将从表单中捕获的图片以及其他一些数据上传到我的 Parse 数据库。许多代码是从 Parse Javascript 指南中复制的。名称、价格和描述详细信息上传正常，但图片从不上传。我在日志上得到的是：

添加项目...

项目已成功添加！

项目已成功上传！

按这个顺序...我不确定为什么会发生这种情况，尤其是因为我使用的是整个承诺范式。为什么要在图片上传之前添加项目？为什么这段代码不起作用？

function addItem()
{
    console.log('adding item...');
    var Item = Parse.Object.extend("FoodItem");
    var newItem = new Item();
newItem.set("createdBy", Parse.User.current());
newItem.set("name",$('#itemName').val());
newItem.set("price",parseInt($('#itemPrice').val()));
newItem.set("description",$('#itemDescription').val());

//Upload pic to parse cloud 
var fileUploadControl = $("#itemImage")[0];
if (fileUploadControl.files.length > 0) 
{
    var file = fileUploadControl.files[0];
    var name = "photo.jpg";
    var parseImage = new Parse.File(name, file);
}

parseImage.save().then
(
    function() 
    {
        newItem.set(name,parseImage);
        console.log("Image sucessfully uploaded!");
        return;
    }
).then
(
    newItem.save().then
    ( 
        function()
        {
            console.log("Item sucessfully added!")
        },
        function(error) 
        {
        // there was some error.
            alert("Saving item failed with error code " + error.message);
        }
    )
);

return false;

}

Answer 1

.then() 将函数作为参数。在您的第二个.then() 中，您希望传递一个在承诺解决时调用的函数。相反，您实际上是在调用该函数并将结果传递给 then.. 以便在第一个 Promise 解决之前调用该函数。此外，您应该从您的第一个 .then() 返回一个承诺。我认为以下应该有效：

parseImage.save().then(function() {
    newItem.set(name,parseImage);
    console.log("Image sucessfully uploaded!");
    return newItem.save();
})
.then(function() {
        console.log("Item sucessfully added!")
      },
      function(error) {
         // there was some error.
        alert("Saving item failed with error code " + error.message);
      });