Question

我尝试使用jQuery编写一些函数来帮助我测试一些我在php中编写的api端点。对于Javascript和jQuery，我是一个新手，我很难解决我需要阅读的内容，以便按照我需要的方式工作。

以下是我试图满足的要求：

通话应该是非阻止的
仅在success按顺序触发的功能
我需要传递参数以及函数而不仅仅是函数名称
每项功能都需要能够在data函数

success: function(data)

api()

我已经阅读过jQuery文档，并认为deferred和promises可能是我应该追求的途径，但我无法得到一个例子。

我的两个功能的简化版本：

（为清楚起见）

// Returns data from an api request providing something hasn't gone horribly wrong
function api( api, method, endpoint, query ) {
    $.ajax({
        type: method,
        url: '/api/' + api + '/' + endpoint,
        data: query,
        dataType: 'json',
        success: function(data) {

            // I currently have a single hardcoded function
            populate( data.result, '#resource', null );

        },
        error: function( data ) {
            // Debug
            dump(data.result);
        }
    });

    // Do some other stuff here
}

// Example call
$('body').on('click', '#bigFatButton', function() {

    // I would like to specify a function (or chain of functions)
    // to be fired on success along with the api() function

    api('resources', 'get', 'document', {
        debug: '1',
        id: '7'
    })

});

这就是我想要实现的目标（好的，简短的和可重复使用的）：

fn1()和fn2()按顺序触发，并且都可以访问api()

返回的数据

api('resources', 'get', 'document', {
    debug: '1',
    id: '7'
}).fn1(data, 'custom', 'params').fn2(data, {other: 'params'}).alert('wooty!');

实现与此相似的最佳方法是什么？非常感谢正确方向的推动！

谢谢。

Answer 1

尝试在return之前添加$.ajax()语句，从data返回api，使用.then()

function api( api, method, endpoint, query ) {
    // return `$.ajax()` jQuery promise to `.then()`
    return $.ajax({
        type: method,
        url: '/api/' + api + '/' + endpoint,
        data: query,
        dataType: 'json',
        success: function(data) {

            // I currently have a single hardcoded function
            populate( data.result, '#resource', null );
            // return `data`
            return data

        },
        error: function( data ) {
            // Debug
            dump(data.result);
        }
    });

    // Do some other stuff here
}

// Example call
$('body').on('click', '#bigFatButton', function() {

    // I would like to specify a function (or chain of functions)
    // to be fired on success along with the api() function

    api('resources', 'get', 'document', {
        debug: '1',
        id: '7'
    }).then(function(data) {
         $.when(fn1(data, 'custom', 'params')
               , fn2(data, {other: 'params'})
         .then(function() {alert('wooty!')})
    })

});

Answer 2

1 - 我会在匿名函数中使用这些方法作为参数

api('resources', 'get', 'document', {
    debug : true, // better to say true or false :)
    id : 7, // if your id is a number use number
    callback : function(data){
        fn1(data);
        fn2(data);
    }
});

2 - 使用数组，如果你有很多东西可以运行。

// in api method..
for(var i; i < cbks.lengths; i++){
    cbks[i](); // execute one by one the callbacks declared.
}

api('resources', 'get', 'document', {
    debug : true, // better to say true or false :)
    id : 7, // if your id is a number use number
    [fn1, fn2, fn3] // here are the callbacks
});

Answer 3

由于AJAX的异步特性，您无法直接从API函数链接函数。运行链式函数时，数据根本不可用。但是你可以在成功函数中完成它。您需要构造一个包装函数。

function wrapper()
{
    return {
       fn1 : function(data){
           //execute code for fn1 here
           return wrapper();
       },
       fn2 : function(data){
           //execute code for fn2 here
           return wrapper();
       },
       alert : window.alert.bind(window);
       }
    }
}

通过在成功函数中运行wrapper.fn1(data, arguments).fn2(data, arguments).alert("whoot!")，它将按照您的预期方式运行。

每当你调用wrapper函数或其中的函数时，它将返回允许函数链接的完整对象。

更有效的设计是在包装器对象之外构造函数，并仅在包装函数内引用它们。

执行多个函数，并在ajax成功时按顺序触发参数

3 个答案: