Jquery承诺链

Jon*_*lls 13 javascript jquery jquery-chaining promise jquery-deferred

我有一个简单的事件链:

  1. 从metaData表中获取列(异步)
  2. 加载选定的列(异步)
  3. 渲染列表

我曾经只是链接这些函数,每个函数在完成后调用下一个函数.然而,它不是很明显(getColumnsFromMeta正在填充视图中的结果).因此,为了清晰和重复使用代码,我想重构这些JQuery Promises.我以前用过承诺.但是我如何连锁超过两个?getColumnsFromMeta ().then(loadSourceFromDatabase /*some arguments*/) //.then(renderList)?;

这是一个例子getColumnsFromMeta:

var getColumnsFromMeta = function(id)
{
    var sql,
        dfd;

    dfd = $.Deferred();

    var onSuccess = function(tx, result)
    {
        var columns = [];

        for (var i = 0; i < result.rows.length; i++) 
        {
            columns.push(result.rows.item(i).Column);
        }

        dfd.resolve(columns);
    };

    var onError = function(tx, error)
    {
        dfd.reject(error);
    };

    sql = "SELECT Column FROM Meta WHERE id = ?";

    database.query(sql, [id], onSuccess, onError);

    return dfd.promise();
};
Run Code Online (Sandbox Code Playgroud)

zer*_*kms 27

它应该是这样的:

function getColumnsFromMeta()
{
    var d = $.Deferred();

    // retrieve data in async manner and perform
    // d.resolve(columns);

    return d.promise();
}

function loadSelectedColumns(columns)
{
    var d = $.Deferred();

    // retrieve data in async manner and perform
    // d.resolve(data);

    return d.promise();
}

function render(data)
{
    // render your data
}

getColumnsFromMeta().pipe(loadSelectedColumns).pipe(render);
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/zerkms/xYDbm/1/ - 这是一个工作样本

http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/ - 这是我非常喜欢的承诺文章

  • Pipe现已弃用,请使用:http://api.jquery.com/deferred.then/ (4认同)
  • @pcv:差不多一年前,当我提出这个答案时 (2认同)