javascript - 从服务器异步请求后将数据推送到数组的特定索引

Question

我有一个对象，我在加载文档时将其推送到主数组中，现在在服务器数据响应被推送到嵌套到主数组中的特定数组中之后。

我尝试制作一个新的 MainData 实例每次我想插入数组时，但对象名称必须相同(因为有很多请求并且所有请求都必须是异步的)这就是它混淆值的原因。

我现在正在做的:

// Knockout viewModel
function ViewModel() {
    self = this
    self.main_array = ko.observableArray([])
}
var pointer = new ViewModel();
ko.applyBidings(pointer);
// Constructor for dummy data
function MainData() {
    self = this
    self.id = ko.observable()
    self.first_val = ko.observableArray()
    self.second_val = ko.observableArray()
}
var main_data;
// Main function which is called when document is loaded
num_type = (data) => { // data is 1234
    main_data = new MainData();
    main_data["id"] = data;
    pointer.main_array.push(main_data);

    // Fetch Requests
    fetch("Num/Func1").then(x => {
        x.json().then(b => {
            main_data.first_val(b);
            char_type(b[0].char); // this has to be called once b is loaded
        })
    })
    // Another fetch request which gives a little late response
    fetch("Num/Func2").then(x => {
        x.json().then(b => {
            // It takes 10 plus seconds meanwhile char_type function has fetched data
            main_data.second_val(b);
        })
    })
}

// char_type function
char_type = (data) => { // data is abc
    main_data = new MainData();
    main_data["id"] = data;
    pointer.main_array.push(main_data);

    // Fetch Request
    fetch("Char/Func1").then(x => {
        x.json().then(b => {
            main_data.first_val(b); // This response comes before fetch to 'Num/Func2' 
        })
    })
    fetch("Char/Func2").then(x => {
        x.json().then(b => {
            main_data.second_val(b); // This response also comes before fetch to 
            //'Num/Func2' 
        })
    })
}

两个索引的值混合在一起，即具有 main_data.id = 123 的索引携带来自具有 main_data.id = abc 的索引的数据

还有一些服务器调用在num_type之外和 char_type功能。

如何摆脱那些混合的东西？

Answer 1

您需要将 main_edata inside 的声明移动到该函数中，这样每次调用该函数时您都会得到一个不同的本地副本。然后，fetch 回调将关闭与触发该特定 fetch 的 num_type/char_type 调用相关的本地副本>.

改变这个:

var main_data;
// Main function which is called when document is loaded
num_type = (data) => { // data is 1234
    main_data = new MainData();
    // ...
}

为此:

// Main function which is called when document is loaded
num_type = (data) => { // data is 1234
    var main_data = new MainData(); // <====== Note `var`
    // ...
}

并且在 char_type 中的 main_data 之前添加 var。