无法将JSON文件中的数据获取到新功能中

Question

我还是Java语言的新手。现在，我正在构建一个Web应用程序，我要在其中显示data.json文件中的项目并搜索这些项目。

我有一个fetchItems()函数，可在其中获取data.json。之后，我用index.html函数显示initItems()中的项目。

问题是我也希望searchItems()函数中的fetch调用中的那些“项目”也可用。通过这些“项目”，我计划过滤这些项目。不幸的是，我缺少了一些东西，这就是console.log中的searchItems.js返回undefined的原因。

我尝试了异步操作和等待操作，但都无法正常工作。

index.js

import { fetchItems } from "./src/js/fetchItems";
import { searchItems } from "./src/js/searchItems";

fetchItems();
searchItems();

fetchItems.js

export function fetchItems() {
    return fetch("./src/data/data.json")
        .then(response => response.json())
        .then(items => initItems(items));
}

function initItems(items) {
    for (let item of items) {
        let appItem = document.createElement("app-item");
        let appItems = document.getElementById("app-items");
        appItems.appendChild(appItem);

        appItem.setAttribute("name", item.name);
        appItem.setAttribute("description", item.description);
    }
}

searchItems.js

export function searchItems(items) {
    console.log(items);
}

Answer 1

fetchItems是异步的，因此尝试立即调用搜索项将不起作用，因为fetchItems尚未完成。幸运的是，fetchItems返回了一个Promise，所以您快到了。承诺是最终价值的表示。要在完成诺言后得到通知，请使用.then方法。例如：

fetchItems()
  .then(() => searchItems());

Async / await可以使语法更简洁，但仍在使用promise。要使用async await执行相同的操作，将类似于以下内容（代码需要在async函数中，因此我创建了一个）：

async function doStuff() {
  await fetchItems();
  searchItems();
}

Answer 2

我会这样做：

index.js

import { fetchItems } from "./src/js/fetchItems";
import { searchItems } from "./src/js/searchItems";


async function fetchAndSearch() {
    const items = await fetchItems();
    searchItems(items);
}

fetchItems.js

async function fetchItems() {
    const response = await fetch("./src/data/data.json");
    const items = await response.json();

    initItems(items);

    return items;
}

如果您以JavaScript开头，那么我认为异步/等待语法是可行的方法。