如何等待使用async wait创建元素

Question

希望大家今天过得愉快。

我试图让fillClassData()等待createClassElementsWith()。我想我必须使用异步等待并返回一个promise，数据以某种方式使其工作。有什么想法可以用易读的方式解决这个问题吗？我会返回什么？

代码：

// get data
async function fillClassData() {
const prop_id = prop_select.children('option:selected').val();
const selected_class = config.getClass();
// fetch data
const data = await api.fetchClass(prop_id);
// create options
await createClassElementsWith(data);
if (itemsExist(selected_class)) {
class_select.val(selected_class);
// fill table info
fillTableData();
}
}
// creates options for classes
async function createClassElementsWith(data) {
// clear options
class_select.find('option').remove();
// create new options per entry
if (data.length <= 0) {
generateOption('default', 'No options yet', class_select);
} else {
generateOption('default', 'Select Class...', class_select);
for (let item of data) {
generateOption(item.class_id, item.class_name, class_select);
}
}
class_select.children('option')[0].selected = true;
}
// creates element with given parameters
function generateOption(value, text, select) {
// create element
let opt = document.createElement('option');
opt.value = value;
opt.innerHTML = text;
// set some options to disabled
if(value === 'default') opt.setAttribute('disabled', true);
// append to select
select.append(opt);
}

数据示例：

class_id: "3179807"
class_longname: "long class name"
class_name: "short class name"

Btw。基于CCD_ 4的选择选项来调用函数CCD_。函数fillTableData()用基于这两个选择获得的数据填充表格。

Answer 1

我最喜欢的解决方法是添加setTimeout()。延迟可以是1毫秒或5毫秒，以您认为更可靠的为准。将所有依赖于createClassElementsWith的代码放入超时。

// get data
async function fillClassData() {
const prop_id = prop_select.children('option:selected').val();
const selected_class = config.getClass();
// fetch data
const data = await api.fetchClass(prop_id);
// create options
createClassElementsWith(data); // Nothing to wait for like evolutionxbox said
setTimeout(() => {
if (itemsExist(selected_class)) {
class_select.val(selected_class);
// fill table info
fillTableData();
}
}, 1); // 1 ms should be enough time for createClassElements to run
}
// creates options for classes
function createClassElementsWith(data) {
// clear options
class_select.find('option').remove();
// create new options per entry
if (data.length <= 0) {
generateOption('default', 'No options yet', class_select);
} else {
generateOption('default', 'Select Class...', class_select);
for (let item of data) {
generateOption(item.class_id, item.class_name, class_select);
}
}
class_select.children('option')[0].selected = true;
}
// creates element with given parameters
function generateOption(value, text, select) {
// create element
let opt = document.createElement('option');
opt.value = value;
opt.innerHTML = text;
// set some options to disabled
if(value === 'default') opt.setAttribute('disabled', true);
// append to select
select.append(opt);
}

Answer 2

我想明白了。非常感谢人们的评论和帮助，但问题完全出在其他地方。我想我的调试技巧不是最好的，我开始看错了方向。

我将选定的选项保存在本地存储中，但每当选择新的prop时，我都不会清除已保存的类。这意味着数据无法正确提取，参数不匹配。我现在在配置中添加了一个函数：config.clearClass();，它清除了localstorage中的类项。

Answer 3

单词async有一个简单的含义：这个函数总是返回一个promise。其他类型的值​​被成功的承诺自动包裹。

async function f() { return 1; }

你可以明确地返回一个承诺，结果会是一样的：

async function f() {

return Promise.resolve(1(；}

f().then(alert); // 1

await关键字将导致JavaScript解释器等待，直到执行await右侧的promise。之后，它将返回其结果，并且代码执行将继续。//仅在异步函数内工作

let value = await promise;
enter code here