then 内部嵌套的 fetch 方法

Question

我正在使用 fetch API 来获取包含对象数组的 json 文件的 url。我根据需要将对象的值插入到 HTML 文件中。但是，我试图从 json 文件中获取另一个 url。每个对象都有关键的“贡献者”，其 url 值是一个 json 文件。我可以在 then 方法中使用另一个嵌套的 fetch 方法来访问它吗？

'use strict';

{
  const root = document.getElementById('root');
  const select = document.createElement('select');
  root.appendChild(select);
  const url = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
  fetch(url)
    .then(resp => resp.json())
    .then(data => {
      select.innerHTML = data.sort()
        .map(repo => `<option value="${repo.id}">${repo.name}</option>`).join("\n");
      select.addEventListener('change', function () {
        const chosenRepoId = +this.value;
        const currentRepo = data.find(repo => repo.id === chosenRepoId);
        document.getElementById('repoInfo').innerHTML = "Repositroy Name: " + currentRepo.name + "<br />" + "Description: " + currentRepo.description + "<br />" + "Forks: " + currentRepo.forks + "<br />" + "Update date: " + currentRepo.updated_at;
        // contributors section code
        const cntrbutorsUrl = currentRepo.contributors_url;
        // fetch the contributors json file 
        fetch(cntrbutorsUrl)
          .then(resp => resp.json)
          .then(data => console.log(data));
      });
    });
  // trying to render contributors_url and get its ifno to fill the contribuers square.
}
````js

Answer 1

我们可以利用 async/await，

(async function() {
                var firstcallresult = await fetch('https://jsonplaceholder.typicode.com/todos')
                .then(response => response.json());
                var secondcallresult = await fetch('https://jsonplaceholder.typicode.com/todos/' + firstcallresult[1].id)
                .then(response => response.json());
                console.log(secondcallresult);
            })();