单击链接时使用异步调用关联的 json 文件

Question

我有一个项目，我必须使用json文件制作朋友列表，然后他们的名字链接到个人资料。我已经到了单击朋友的选项卡会显示friends.json文件的地步，但是我不知道如何使用异步来调用配置文件。配置文件是每个朋友附带的单独 json 文件(例如 1.json、2.json 等(。

我有一个链接点击事件，这就是我被困住的地方。我对javascript真的很陌生，我使用PHP而不是javascript来理解这一点。我也不能更改html或json文件，只能更改javascript。

[{
"id": 1,
"firstName": "Jane",
"lastName": "Doe"
}, {
"id": 2,
"firstName": "Tom",
"lastName": "Jones"
}, {
"id": 3,
"firstName": "Clark",
"lastName": "Kent"
}, {
"id": 4,
"firstName": "Sally",
"lastName": "Anne"
}]

window.addEventListener('DOMContentLoaded', function(e) {
const loadDataLink = document.querySelector('.friends a');
const display = document.querySelector('.content');
let appData=[];
let friendList = ``;
fetch('friends/friends.json').then
(response => response.json()).then
(data =>{
appData =  [...data]
buildMarkup() 
}) 
function buildMarkup(){
let listItem = ``;
appData.forEach(friend=>{
listItem += `<li class="friend">${friend.firstName} ${friend.lastName}</li>`
})
const list = `<ul>${listItem}</ul>`
let fragment = document.createRange().createContextualFragment(list)
friendList = fragment.querySelector('ul');
const links = friendList.querySelectorAll('li');
links.forEach((link, index)=>{
link.dataset.index = index;
link.addEventListener('click', function(e){
fetch('friends/.json');
console.log(e.target.dataset.index)
display.innerHTML = ""
}) 
})   
}
loadDataLink.addEventListener('click', function(e){
display.innerHTML= ""
display.appendChild(friendList);
})   
}) 

即使您只是有关于异步的提示，我也将不胜感激。

Answer 1

据我从您的代码中可以看出，您的问题与异步无关。您使用 fetch 的方式不使用异步函数。异步函数允许您编写较少依赖回调的代码。您可以阅读异步，获取和承诺。

但是，要修复您的代码，您可能只需要对朋友的 json 文件执行与对朋友列表相同的操作。您可以：

• 将好友的 ID 放入相应列表项的数据集中：

appData.forEach(friend=>{
listItem += `<li class="friend" data-id="${friend.id}">
${friend.firstName} ${friend.lastName}</li>`
})

• 像处理好友列表一样使用 fetch
：

link.addEventListener('click', function(e){
fetch(`friends/${e.target.dataset.id}.json`)
.then(response => response.json())
.then( (data) => {
buildFriendMarkup(data);
});
display.innerHTML = ""
}) 

• 定义buildFriendMarkup以设置标记，就像为好友列表设置buildMarkup一样

如果这不是您要查找的内容，则需要更准确地描述您的问题和您遇到的错误。