javascript - JS回调链困惑

Question

我有以下 ST/ExtJS 与 Phonegap API 的代码混合，但这是一个更一般的 Javascript 问题:

当点击表单上的保存按钮时，我调用此方法:

onSavePush: function(button) {
    var form = button.up('panel'),
    //get the record 
        record = form.getRecord(),
    //get the form values
        values = form.getValues();
    //if a new push
    if(!record){
        var newRecord = new EvaluateIt.model.SiteEvaluation(values);
        Ext.getStore('SiteEvaluations').add(newRecord);
    }
    //existing push
    else {
        record.set(values);
    }
        form.hide();
    // assemble record 
    //assemble_evaluation(record);

    initialize_image_post(record, values);

    // add file_name update to store here:

},

函数initialize_image_post() 执行它所说的操作(设置 API url 并获取 uri 引用):

function initialize_image_post(record) {

    var uri,
        url;

    // use new API with authorization token
    url =  EvaluateIt.config.protocol;
    url += EvaluateIt.config.test;
    url += EvaluateIt.config.domain;
    // url += EvaluateIt.config.dev; // ev environment
    // url += EvaluateIt.config.file_response;  // needed for POST echo
    url += EvaluateIt.config.apiViewNomination;
    url += EvaluateIt.config.file_upload;
    url += '?token=' + sessionStorage.sessionToken;

    uri = record.data.imageUri; // local path to image

    console.log('uri: ' + uri + 'url: ' + url); 

    post_image(uri, url);
}

然后在函数 post_image() 中调用 Phonegap 文件传输 API

// Phonegap file transfer
function post_image(imageUri, url) {
    var options = new FileUploadOptions(),
        ft = new FileTransfer();

    options.fileKey = 'userfile';
    //options.fileName = imageUri.substr(imageUri.lastIndexOf('/') + 1);
    options.mimeType = 'image/jpeg';
    options.chunkedMode = false;

    ft.upload(imageUri, encodeURI(url), post_success, post_error, options);
}

成功后，我会从服务器获取响应并获取 file_name，以便我可以在初始方法中将其写入本地数据存储

function post_success(r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent);
    alert(r.response);

    var response = Ext.JSON.decode(r.response),
        file_name = response.imageData.file_name;

    alert(file_name);

    // somehow get file_name back up to onSavePush method

}

问题是，要做到这一点，我需要将响应变量返回到我的 onSavePush 方法。我该怎么做呢？我想我需要以某种方式设置回调链或类似的东西？谢谢!

Answer 1

我猜您想故意在 onSavePush 方法中获得响应，对吗？然后，通过过程式编程，解决方案是在 onSavePush 中定义 post_success 回调并将其传递下去:

onSavePush: function(button) {
    // bablabla
    var post_success = function(r) {
        // bablabla or "add file_name update to store here"
    }
    initialize_image_post(record, values, post_success);
}

function initialize_image_post(record, values, callback) {
    // bablabla
    post_image(uri, url, callback);
}

function post_image(imageUri, url, post_success) {
    // bablabla
    ft.upload(imageUri, encodeURI(url), post_success, post_error, options);
}

在理想的情况下，您可以设计一个类/单例来关心发布图像、成功时触发事件，因此您可以在 onSavePush 中将一次性事件处理程序附加到它。