如何在 jQuery 中异步获取 json 后迭代 json 对象？

Question

我在异步获取后迭代 jQuery 中的 json 对象时遇到问题。使用异步函数 'listFiles' 我成功地获得了目录 (dir) 所需的文件列表，至少 console.log 显示 json 内容。但是当我尝试在获取的文件列表 json 对象上调用 $.each 时，$.each 根本不起作用。 $.each 函数中的 console.log 应该输出一些东西。

async function listFiles(dir){
  var json_data = await fetch('action.php', {
    method: 'POST', 
    mode: "same-origin",
    credentials: "same-origin",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({dir:dir})
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
    return data
  })
  .catch((error) => {
    console.error('Error:', error);
  });

  return json_data;
}

var json = listFiles('images');

$(() => {
  $.each(json, function(index,val){ //this function doesn't work, dunno why :(
    console.log("index: "+index+"; value: "+val); 
  })

  console.log(json); //this shows fetched json object's content
});

Answer 1

您的代码应如下所示，您使用了 async-await 并使用了回调，并且在数据不可用时打印了数据。

async function listFiles(dir) {
    try {
        const response = await fetch('action.php', {
            method: 'POST',
            mode: "same-origin",
            credentials: "same-origin",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ dir: dir })
        })
        const json_data = await response.json();
        console.log('Success:', json_data);

        return json_data;
    }
    catch (error) {
        console.error('Error:', error);
    }

}

async function printJsonData() {
    var json = await listFiles('images');

    $.each(json, function (index, val) { // now it should work :)
        console.log("index: " + index + "; value: " + val);
    })

    console.log(json); //this shows fetched json object's content
}

printJsonData();

如何在 jQuery 中异步获取 json 后迭代 json 对象？

How to iterate json object after async fetching json in jQuery?

javascript

each

jquery

json

asynchronous