javascript - 如何通过多个 $.ajax 调用实现异步计算可观察值？

Question

我正在尝试实现一个异步计算的可观察值，如 here 所示。

我可以通过一次 ajax 调用成功完成此操作。我目前面临的挑战是如何在循环中执行各种 ajax 调用，异步构建数组，然后使用 jQuery Promise 将数组返回到我计算的可观察数组。

HTML 表单基本上按以下方式工作:

1. 这是学生类(class)表。
2. 对于每一行，用户输入人员编号，然后在另一列中输入以逗号分隔的类(class) ID 列表。例如100、200、300。
3. 计算的可观察量的目的是存储一个数组包含第 2 步中输入的类(class)的类(class)详细信息。
4. 通过为每个类(class)触发 ajax 调用并将 HTTP 响应存储在数组中来获取详细信息。
5. 我不希望用户等待结果，因此是实现异步计算可观察量的原因。

我的问题:我在将最终数组的值返回到可观察对象时遇到问题。它始终是未定义的。 ajax 调用工作正常，但也许我仍然没有正确处理 promise 。

这是我的类(class)的代码:

function asyncComputed(evaluator, owner) {
            var result = ko.observable(), currentDeferred;
            result.inProgress = ko.observable(false); // Track whether we're waiting for a result

            ko.computed(function () {
                // Abort any in-flight evaluation to ensure we only notify with the latest value
                if (currentDeferred) { currentDeferred.reject(); }

                var evaluatorResult = evaluator.call(owner);
                // Cope with both asynchronous and synchronous values
                if (evaluatorResult && (typeof evaluatorResult.done == "function")) { // Async
                    result.inProgress(true);
                    currentDeferred = $.Deferred().done(function (data) {
                        result.inProgress(false);
                        result(data);
                    });
                    evaluatorResult.done(currentDeferred.resolve);
                } else // Sync
                    result(evaluatorResult);
            });

            return result;
        }


        function personDetails(id, personNumber, courseIds) {
            var self = this;
            self.id = ko.observable(id);
            self.personNumber = ko.observable(personNumber);
            self.courseIds = ko.observable(courseIds);

            // Computed property to extract PIC details for additional PICs.
            // This is computed observable which returns response asynchronously
            self.courseDetails = asyncComputed(function () {
                var courseIdsArray = self.courseIds().split(",");
                var arr = [];
                var arr_promises = [];

                function getCourseDetails(courseId) {
                    var dfrd = $.Deferred();
                    var content = {};

                    content.searchString = courseId;

                    var url = 'MyURL';

                    return $.ajax(url, {
                        type: 'POST',
                        dataType: 'json',
                        data: requestData, // content of requestData is irrelevant. The ajax call works fine.
                        processdata: true,
                        cache: false,
                        async: true,
                        contentType: "application/json"
                    }).done(function (data) {
                        arr.push(new PicDetails(data.GenericIdentifierSearchResult[0]));
                    }).fail(function () {
                        alert("Could not retrieve PIC details");
                    }).then(function () {
                        dfrd.resolve();
                    });

                }

                if (courseIdsArray.length > 0) {

                    $.each(courseIdsArray, function (index, courseId) {
                        if (courseId.length > 0) {
                            arr_promises.push(getCourseDetails(courseId));
                        }
                    });
                };

                $.when.apply($, arr_promises).done(function () {
                    return arr;
                })

            }, this);
        } 

Answer 1

我认为您实际上并不需要为此使用单独的 api/代码。

您可以为站点上更改的每个输入/值创建可观察量，并根据这些创建计算可观察量。

例如粗略的伪代码

self.id           = ko.observable(id);
self.personNumber = ko.observable(personNumber);
self.courseIds    = ko.observable(courseIds);
self.courseDetailsArray = ko.observableArray([]);
self.courseDetails = ko.computed(function() {
    //computed the course details based on other observables
    //whenever user types in more course ids, start loading them
    $.get( yoururl, {self.courseIds and self.id}).success(data) {
        when finished async loading, parse the data and push the new course details into final array
        self.courseDetailsArray.push( your loaded and parsed data );
        //since courseDetailsArray is observableArray, you can have further computed observables     using and re-formatting it.
    }
});