需要Javascript Ajax隊列系統。 跨域jsonp。 我該怎么做。

Question

我有這個JavaScript代碼，我想更改為隊列系統。 目前，我不得不像這樣編碼。 當請求鏈很長時，它變得混亂。 注意：我的函數請求返回json對象。 將async設置為false不會用於跨域jsonp調用，因此不會起作用。 呼叫必須按此順序進行。 jQuery隊列將無法正常工作。

var customers;
var orders;
var products;
function GetCustomers(){
            $.ajax({
                url: somecrossdomainurl?calback=GetCustomerCallback,
                dataType: 'jsonp',
                async: false
            });
}

function GetCustomerCallback(data){
            customers=data;
            GetCustomersOrder();
        }

function GetCustomersOrder(){
                $.ajax({
                    url: somecrossdomainurl?calback=GetCustomersOrderCallback,
                    dataType: 'jsonp',
                    async: false
                });
        }

function  GetCustomersOrderCallback(data){
    orders = data;
    GetOrderProducts();
}

function GetOrderProducts(){
        $.ajax({
            url: somecrossdomainurl?calback=GetOrderProductsCallback,
            dataType: 'jsonp',
            async: false
        });
}

function  GetOrderProductsCallback(data){
    products = data;
    DisplayCustomersAndOrder();
}

function DisplayCustomersAndOrder(){
    //loop round customer,order,products and display info
}


//I want to do something like this:

function DisplayData(){
    var queue;

    queue.GetCustomer();
    queue.GetCustomersOrders();
    queue.GetOrderProducts();
    queue.DisplayCustomersAndOrder();
    queue.Start()
}

有什么建議么

Answer 1

這是使用諾言的異步隊列的實現。 https://gist.github.com/thejuan/5697765

它在TypeScript中，但是幾乎沒有做過更改為純JS。

如果您不希望出現錯誤，它將繼續發生錯誤，沒有比這更簡單的解決方案（只需使用then鏈接每個呼叫）

注意：制作時需要Jquery 1.8或更高版本，然后行為“正確”

export class AsyncExecutionQueue{

    private tail: JQueryPromise = $.Deferred().resolve();

    public enqueue(cmd:()=>any): JQueryPromise {

        console.log("Queuing Command");
        var next = $.Deferred();
        var client = $.Deferred();
        this.tail.always(() => {

            try {

                var result = cmd();
                if (result.done && result.fail) {
                    result
                    .done(client.resolve, next.resolve)
                    .fail(client.reject, next.resolve);
                }
                else {
                    client.resolve(result);
                    next.resolve();
                }
            }
            catch (e) {
                client.reject(e);
                next.resolve();
            }
        });
        this.tail = next;
        return client;
    }
}