循环ajax调用的最佳方法是什么

时间:2016-10-11 14:20:04

标签: javascript jquery ajax promise deferred

我正在使用Sharepoint,我有一个应用程序,可以在网站集中创建列表(不是应用程序!)。创建列表不是问题。 我不想创建15列并将它们添加到默认视图中。我准备了一个“配置”,其中包含列表及其字段的信息。

var ChangeRequestLogListConfig = {
    listName: 'ChangeRequestLog',
    fields: [
        { 'FieldTypeKind': 8, 'Title': 'STC Relevant', 'InternalName': 'STCrelevant', 'StaticName': 'STCrelevant' },
        { 'FieldTypeKind': 3, 'Title': 'Description/Reason', 'InternalName': 'DescriptionReason', 'StaticName': 'DescriptionReason' },
        { 'FieldTypeKind': 6, 'Title': 'Source of Change', 'InternalName': 'SourceOfChange', 'StaticName': 'SourceOfChange', 'Choices': { 'results': ['customer', 'internal'] } },
        //12 more objects like the above
    ]
}

我们遇到了问题:使用其余资源.../ViewFields/AddViewField.../fields(使用http post创建新的资源)只支持一个参数,这意味着我必须执行2x15 ajax调用。

执行所有这30个操作然后进行最终回调的正确方法是什么?当然我知道如何循环遍历字段数组,我根本不知道如何以正确的方式构建最终的回调。

更新/跟进

在几个答案的帮助下,我设法构建了以下代码:

var spExecutor = new SP.RequestExecutor(_spPageContextInfo.siteAbsoluteUrl);
var requestUrl = _spPageContextInfo.siteAbsoluteUrl + "/_api/SP.AppContextSite(@target)/web/Lists/getbytitle('" + listConfig.listName + "')/fields?@target='" + hostWebUrl + "'";

//map field configs to promises
var promises = listConfig.fields.map(fieldConfig => {
    return spExecutor.executeAsync({
        url: requestUrl,
        method: "POST",
        body: JSON.stringify(fieldConfig),
        headers: {
            "accept": "application/json;odata=verbose",
            "content-type": "application/json; odata=verbose"
        },
        error: err => console.log(err)
    });
});

//Wait for all calls to be done
$.when.apply($, promises).then(callbackFn);

正如您可能已经看到的那样,我没有使用$.ajax而是SP.RequestExecutor。 问题:这不会像jQuery的ajax一样返回promises。这导致定时问题( - > 15次呼叫,浏览器大多只支持4个并行呼叫)。上面的代码工作,如果我设置断点并在调用之间等待1-2秒,它会按预期创建所有字段。

我的后续问题:我如何等待完成第一次调用以初始化第二次,然后是第三次,依此类推? 我不确定我是否以正确的方式使用了承诺。

2 个答案:

答案 0 :(得分:2)

使用.map将每个字段转换为Promise

var promises = ChangeRequestLogListConfig.fields.map(
    item => $.ajax( ... )
);

然后$.when等待他们全部完成:

$.when.apply($, promises).then( ... );

请注意,这将与您的浏览器允许的并行启动尽可能多的AJAX请求 - 通常为四个。

编辑,因为您已经说过您确实希望AJAX查询能够串行运行(以避免服务器409错误),我的addFieldsToList函数版本将如下所示:

function addFieldsToList(listConfig) {

    return listConfig.fields.reduce(function(promise, field) {
        return promise.then(executeRequest(field, listConfig.listName));
    }, Promise.resolve(null));

}

避免传递回调,因为此函数的返回值本身就是Promise,你可以链接:

addFieldsToList(myConfig).then(callback);

答案 1 :(得分:0)

最后我最终这样做了:

//Promise returning request
function executeRequest(fieldConfig, listName) {
    return function () {
        return new Promise(function (resolve, reject) {
            var requestUrl = _spPageContextInfo.siteAbsoluteUrl + "/_api/SP.AppContextSite(@target)/web/Lists/getbytitle('" + listName + "')/fields?@target='" + riskapp.utils.getSpHostUrl() + "'";
            var spExecutor = new SP.RequestExecutor(_spPageContextInfo.siteAbsoluteUrl);
            spExecutor.executeAsync({
                url: requestUrl,
                method: "POST",
                body: JSON.stringify(fieldConfig),
                headers: {
                    "accept": "application/json;odata=verbose",
                    "content-type": "application/json; odata=verbose"
                },
                success: resolve,
                error: reject
            });
        });
    };
}

//Add fields to list according to config
function addFieldsToList(listConfig, callback) {

    //Prepare empty/resolved promise to iterate later
    var promise = Promise.resolve(null);

    //Loop through every field 
    $.each(listConfig.fields, function (i, field) {
        promise = promise.then(executeRequest(listConfig[field], listConfig.listName));
    });

    //execute callback when all fields are created
    promise.then(callback);
}

这会按顺序执行所有调用,而不是同时执行。