通过ajax数据进行的本地存储设置随机未定义

Question

我正在使用以下代码将项目设置为本地存储。我遇到的问题是，每当我刷新页面时，当我检查本地存储时，有些项目没有设置，它显示为未定义，这是绝对随机的，有时所有项目都设置得很完美。如何确保所有项目都已设置，没有任何未定义的项目？

const catdata = [];
var catArr = JSON.parse(localStorage.getItem('cat'));
for (let i = 0; i < catArr.length; i++) {   
const catid   = catArr[i]['id'];
const catname = catArr[i]['name'];
$('#topitems').prepend('<div ><a class="topitems" href="'+catArr[i]['id']+'">'+catArr[i]['name']+'</a></div>');  
(function(i) {
$.ajax( { url : "sales/item_search_cat?cat="+catid
, data : "GET" 
//  ,  async: "false",
, dataType : "json"
, success : function(data) {
catdata.push(data);
localStorage.setItem(catid,JSON.stringify(catdata[i]));
}
});  
})(i);
}

Answer 1

ajax请求的执行不是按顺序执行的，有时您的代码正在访问不存在的索引。

例如，一个带有索引2的响应到达，代码推入索引0处的空数组，而catdata[i]正试图获取索引2。

我认为您必须使用await调用ajax请求，或者您可以直接使用数据：

localStorage.setItem(catid, JSON.stringify(data));

可能的解决方案(我没有测试(：执行是异步的，如果你需要等待执行，你必须遵循异步/等待的方法。

function callAjax(catid) {
$.ajax({
url: "sales/item_search_cat?cat=" + catid,
data: "GET",
dataType: "json",
success: function(data) {
localStorage.setItem(catid, JSON.stringify(data));
success(data);
}
});
}
let catArr = JSON.parse(localStorage.getItem('cat'));
catArr.forEach(function({id: catid, name: catname}) {
$('#topitems').prepend('<div ><a class="topitems" href="' + catid + '">' + catname + '</a></div>');
callAjax(catid);
});