使用 javascript fetch api 提取数据

Question

我正在使用 fetch api 提取数据。但我无法检索我提取的最后一个数据的 todosApi 部分中的数据。如何提取数据？

const usersApi = () =>{
    fetch("https://jsonplaceholder.typicode.com/users").
    then(response=>response.json()).
    then(girilenVeri).
    catch(e=>console.log(e));
}

const todosApi = (element) =>{
    fetch(`https://jsonplaceholder.typicode.com/todos/?userId=${element.id}`).
    then(response=>veriOlusturucu(response.json(), element)).//I can't get the data in response.json
    catch(e=>console.log(e));
}

const girilenVeri = (data) => {
    let cumle = [];
    document.getElementById('arama').addEventListener('keydown',function(e){
        if(e.keyCode == 8){
            cumle.pop();  
            veriEslestir(data, cumle);
        }
    });
    document.getElementById('arama').addEventListener('keypress',function(e){
        cumle.push(String.fromCharCode(e.keyCode));
        veriEslestir(data, cumle);
    });
}

const veriEslestir = (data,cumle) =>{
    veri = cumle.toString().replace(/,/g,"");
    data.forEach(element => {
        if(element.username.toLowerCase() == veri.toLowerCase()){
            todosApi(element);
        }
    });
}

const veriOlusturucu = (todo,element) => {
    console.log(todo);
    console.log(element);
    let html = "";
    html =`
                <h5 class="card-title">İletişim</h5>
                <ul class="list-group">
                    <li class="list-group-item">Kullanıcı Adı: ${element.username}</li>
                    <li class="list-group-item">E-Mail: ${element.email}</li>
                    <li class="list-group-item">Web Site: ${element.website}</li>
                    <li class="list-group-item">Şirket: ${element.company.name}</li>
                    <li class="list-group-item">Telefon No: ${element.phone}</li>
                    <li class="list-group-item">Adres: ${element.address.street} ${element.address.suite} ${element.address.city} ${element.address.zipcode}</li>
                </ul>
                <h5 class="card-title">Yapılacaklar Listesi</h5>
                <ul class="list-group">
    `;

    todo.forEach(element=>{//I need to access the data here with loop
        html+=`
            <li class="list-group-item">Kullanıcı Adı: ${element.title}</li>
        `;
    });

    html +=`</ul>`;
    document.getElementById('veriListele').innerHTML=html;
}

document.addEventListener('DOMContentLoaded',usersApi());

如何使用 foreach 返回“response.json”部分？ 用户信息没有问题。但是todo信息有问题。把它作为一个承诺寄给我。我无法访问承诺结果

如果我能进入“PromiseResult”，问题就会得到解决。但我无法到达

Answer 1

您没有完全正确地使用 fetch api 与待办事项列表。如果您注意到，在您的 userApi 方法中，您包含一个额外的 .then ，这是返回 json 数据而不是 promise 所必需的：

const usersApi = () =>{
  fetch("https://jsonplaceholder.typicode.com/users").
  then(response=>response.json()).
  then(girilenVeri).
  catch(e=>console.log(e));
}

 const todosApi = (element) =>{
   fetch(`https://jsonplaceholder.typicode.com/todos/?userId=${element.id}`)
   .then(response=>response.json())
   .then(data => veriOlusturucu(data, element))
   catch(e=>console.log(e));
}

试试这个。