Question

我的文件夹上有json fil，并且我已经安装了http-serve也可以在本地运行，但是在控制台chrome上什么也没显示来获取json数据，可以吗？

这是我的JavaScript可以调用它并在我的html和开发人员工具上显示

  async function bestFetch() {
      try {
         const first = fetch('./data.json');
         let json = await first_name.json();
         console.log(first);
       }
       catch(e) {
         console.log('Error!', e);
       }
      }

Answer 1

如果文件与HTML文件位于同一路径，则可以调用“ ./data.json”，并且在获取返回承诺时，它需要转换为json并转换您的响应并添加到HTML选择中您的元素“演示”并添加到.innerHTml。

    fetch('./data.json').then(response => {
      return response.json();
    }).then(data => {
      document.getElementById("demo").innerHTML = data;
      console.log(data);
    }).catch(err => {
      // Do something for an error here
    });

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API https://www.w3schools.com/js/js_output.asp

Answer 2

fetch函数是异步的，这意味着代码在继续下一行之前不会等待它完成提取。考虑到这一点，请确保您的代码在获取json并将其记录到控制台之前先等待提取：

async function bestFetch() {
  try {
     const first = await fetch('./data.json'); //<-- wait for the fetch to finish and return the resolved value. 
     let json = await first.json(); //<-- use the const first, not first_name
     console.log(first);
   }
   catch(e) {
     console.log('Error!', e);
   }
  }

如何读取文件夹中的json文件并将其放在html

2 个答案: