使用fetch读取json

使用fetch读取json数据的方法如下所示：

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // 在这里处理获取到的json数据
    console.log(data);
  })
  .catch(error => {
    console.log('error: ' + error.toString());
  });

这段代码会发送一个GET请求，获取同目录下的data.json文件，并将返回的数据解析为json格式。然后你可以在第二个`.then()`回调函数中处理获取到的json数据。如果发生错误，会在`.catch()`回调函数中捕获并打印错误信息。\[1\]

另外，如果你想获取其他目录下的json文件，可以根据文件的相对路径进行修改。例如，如果你想获取`./components/datas/name.json`文件，可以使用以下代码：

fetch('./components/datas/name.json')
  .then(response => response.json())
  .then(data => {
    // 在这里处理获取到的json数据
    console.log(data);
  })
  .catch(error => {
    console.log('error: ' + error.toString());
  });

同样地，你可以在第二个`.then()`回调函数中处理获取到的json数据，如果发生错误，会在`.catch()`回调函数中捕获并打印错误信息。\[2\]

希望这些代码能够帮助到你。如果你在项目中修改了路径，请确保路径的正确性。\[3\]
#### 引用[.reference_title]
- *1* [fetch获取json数据](https://blog.csdn.net/dreamjay1997/article/details/83276852)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [fetch获取本地json数据](https://blog.csdn.net/qq_41604498/article/details/103847769)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]