承诺和上传数据

Question

我在在线发送表格或在本地保存表格时遇到了一些问题。我有一个 Phonegap 应用程序，它只是一个简单的表单，可以保存到数据库中，或者如果失败，则保存到本地。

我所有的设置都只有这个功能。首先我想，我只是用布尔值来做，运行函数，如果一切顺利的话 return 真。但这不起作用，因为代码只是在我有一个值要比较之前执行，这意味着该值将始终为 false。

现在是代码：

if(uploadDataAndImage(formData))
{
 //Its true, do my things
}
else
{
//Its false
}

这是布尔函数：

function uploadDataAndImage(dataForm) {

                var localURL = dataForm.cardurl;
                console.log(localURL);

                if(localURL == "")
                {
                    $$.ajax({
                        type: "POST",
                        url: "upload.php",
                        crossDomain: true,
                        data: dataForm,
                        success:function(data)
                        {
                            console.log("Upload to server without card");
                            return true;
                        },
                        error: function()
                        {
                            console.log("Form couldn't upload to the server");
                            //alert("Couldnt upload to server, saving locally");
                            return false;
                        }
                    });

                }
                else{
                    //set upload options
                    var options = new FileUploadOptions();

                    options.chunkedMode = false;

                    console.log("Start upload picture");

                    var ft = new FileTransfer();
                    ft.upload(deLokaleURL, encodeURI("uploaderino.php"), win, fail, options);

                    function win(r) {
                        console.log("Code = " + r.responseCode);
                        console.log("R" + r.response);
                        console.log("Sent = " + r.bytesSent);

                        dataForm.cardurl = r.response;
                        var dataString = JSON.stringify(dataForm);



                        $$.ajax({
                            type: "POST",
                            url: "upload.php",
                            crossDomain: true,
                            data: dataForm,
                            success:function(data)
                            {
                                console.log("Upload to server with card");
                                return true;
                            },
                            error: function()
                            {
                                console.log("Form couldn't upload to the server, do nothing");
                                return false;

                            }
                        });



                    }

                    function fail(error) {
                        //alert("An error has occurred: Code = " + error.code);
                        console.log("An error has occurred: Code = " + error.code);
                        console.log("upload error source " + error.source);
                        console.log("upload error target " + error.target);


                        showMessage("Image upload has failed, get a better internet connection and try again!" , function(){console.log("Upload van de form is mislukt!")});
                        return false;

                    }
                }



            }

但这显然行不通。现在我做了一些研究并提出了 soem 问题，我找到了 Promises。但是我似乎无法掌握如何使用它。

我是这样想的：

var deferred = $.Deferred();

                deferred.resolve(uploadDataAndImage(formData));

                deferred.done(function(value) {
                  //Upload went well so do my things
                });

但这不是它的工作原理，对吧/?

Answer 1

我只是将其设置为使用回调函数。可能是这样的

uploadDataAndImage(formData, function(data){
     console.log(data);
     if(data){
         //do something in here that needs doing as the ajax call was true
     }
     else
     {
        //Do something after the ajax returned an error...
     }
})

function uploadDataAndImage(dataForm, callBack) {

                var localURL = dataForm.cardurl;
                console.log(localURL);

                if(localURL == "")
                {
                    $$.ajax({
                        type: "POST",
                        url: "upload.php",
                        crossDomain: true,
                        data: dataForm,
                        success:function(data)
                        {
                            console.log("Upload to server without card");
                            callBack(true);
                        },
                        error: function()
                        {
                            callBack(false);
                        }
                    });

                }
                else{
                    //set upload options
                    var options = new FileUploadOptions();

                    options.chunkedMode = false;

                    console.log("Start upload picture");

                    var ft = new FileTransfer();
                    ft.upload(deLokaleURL, encodeURI("uploaderino.php"), win, fail, options);

                    function win(r) {
                        console.log("Code = " + r.responseCode);
                        console.log("R" + r.response);
                        console.log("Sent = " + r.bytesSent);

                        dataForm.cardurl = r.response;
                        var dataString = JSON.stringify(dataForm);



                        $$.ajax({
                            type: "POST",
                            url: "upload.php",
                            crossDomain: true,
                            data: dataForm,
                            success:function(data)
                            {
                                callBack(true);
                            },
                            error: function()
                            {
                                callBack(false);

                            }
                        });



                    }

                    function fail(error) {
                        //alert("An error has occurred: Code = " + error.code);
                        console.log("An error has occurred: Code = " + error.code);
                        console.log("upload error source " + error.source);
                        console.log("upload error target " + error.target);


                        showMessage("Image upload has failed, get a better internet connection and try again!" , function(){console.log("Upload van de form is mislukt!")});
                        return false;

                    }
                }



            }

您可以随意使用您希望函数执行的操作，我不是 100% 确定您想要什么 :) 但是您放入函数中的任何内容都会在 ajax 调用之后执行已制作。

Answer 2

在 uploadDataAndImage 中使用 deferred 来 return 一个承诺。然后，您可以在 ajax 调用完成后使用 then() 和 catch() 做一些事情。

function uploadDataAndImage() {
  var deferred = $.Deferred();

  $$.ajax({
    type: "POST",
    url: "upload.php",
    crossDomain: true,
    data: dataForm,
    success:function(data) {
      deferred.resolve();
    }, error: function(e) {
      deferred.reject(e);
    }
  });

  return deferred.promise;
}

uploadDataAndImage(formData).then(function() {
  //Its true, do my things
}).catch(function() {
  //Its false
});

Answer 3

你可以使用 promises，像这样：

uploadDataAndImage(formData)
    .done(function(){
        // Its true, do my things
    }).fail(function(){
        //Its false
    });

function uploadDataAndImage(dataForm) {
    var deferred = $.Deferred();
    var localURL = dataForm.cardurl;
    console.log(localURL);

    if (localURL == "") {
        $$.ajax({
            type: "POST",
            url: "upload.php",
            crossDomain: true,
            data: dataForm,
            success: function(data) {
                console.log("Upload to server without card");
                deferred.resolve();
            },
            error: function() {
                console.log("Form couldn't upload to the server");
                //alert("Couldnt upload to server, saving locally");
                deferred.reject();
            }
        });

    } else {
        //set upload options
        var options = new FileUploadOptions();

        options.chunkedMode = false;

        console.log("Start upload picture");

        var ft = new FileTransfer();
        ft.upload(deLokaleURL, encodeURI("uploaderino.php"), win, fail, options);

        function win(r) {
            console.log("Code = " + r.responseCode);
            console.log("R" + r.response);
            console.log("Sent = " + r.bytesSent);

            dataForm.cardurl = r.response;
            var dataString = JSON.stringify(dataForm);



            $$.ajax({
                type: "POST",
                url: "upload.php",
                crossDomain: true,
                data: dataForm,
                success: function(data) {
                    console.log("Upload to server with card");
                    deferred.resolve();
                },
                error: function() {
                    console.log("Form couldn't upload to the server, do nothing");
                    deferred.reject();

                }
            });



        }

        function fail(error) {
            //alert("An error has occurred: Code = " + error.code);
            console.log("An error has occurred: Code = " + error.code);
            console.log("upload error source " + error.source);
            console.log("upload error target " + error.target);


            showMessage("Image upload has failed, get a better internet connection and try again!", function() {
                console.log("Upload van de form is mislukt!")
            });
            deferred.reject();

        }
    }
    return deferred.promise();
}

承诺和上传数据

Promises and uploading data

javascript

jquery

promise