Javascript。入れ子になったフェッチの約束を待ちます

Question

私は、約束の結果を使って別のfectchリクエストを作成する必要があります。私はwordpressの残りのAPIを使って作業しています。そのカテゴリ名を取得するには、ポストを持つ2つの配列とカテゴリ名availablesを持つもう1つの配列を作成します。

fetchAccordionData().then((data) => 
    { 
     console.log(data.subCatList, data.posts); 
     for(let cat of data.subCatList) 
     { 
      console.log(cat); 
     } 
    }); 

ので、フェッチ秒の約束がそのように解決されたときにどのように私は知っていますか：ここに は私の関数は、今私はまだ準備ができてisn`t subCatList配列関数を呼び出すとき

function fetchAccordionData() 
{ 
    const id = document.querySelector('.acc').getAttribute('data-id'), 
      wpRestAPI = '/wp-json/wp/v2/'; 
    return fetch(wpRestAPI + 'posts?per_page=100&categories=' + id) 
     .then((resp) => resp.json()) 
     .then((data) => 
     { 
      let curId = [], subCatList = []; 
      data.map((post) => 
      { 
       let catList = post.categories.filter((c) => c !== parseInt(id)); 
       fetch(wpRestAPI + 'categories/' + catList[0]) 
        .then((r) => r.json()) 
        .then((cat) => 
        { 
         if(!curId.includes(cat.id)) subCatList.push({id: cat.id, name: cat.name}); 
         curId.push(cat.id); 
        }); 
      }); 
      return {'subCatList':subCatList, 'posts':data} 
    }); 
} 

です私はデータを使うことができますか？

Answer 1

約束事をすべて配列に入れて、を使用して、約束をすべて解決してからsubCatListにアクセスする必要があります。 promises内のすべての約束が解決した後、最後のステップは、オブジェクト{'subCatList': subCatList, 'post': data}のみを返すこと

function fetchAccordionData() { 

    const id = document.querySelector('.acc').getAttribute('data-id'), 
      wpRestAPI = '/wp-json/wp/v2/'; 

    return fetch(wpRestAPI + 'posts?per_page=100&categories=' + id) 
     .then((resp) => resp.json()) 
     .then((data) => { 

      let curId = [], subCatList = []; 

      // promises is an array of promises 
      let promises = data.map((post) => { 

       let catList = post.categories.filter((c) => c !== parseInt(id)); 

       // return a promise on each iteration 
       return fetch(wpRestAPI + 'categories/' + catList[0]) 
        .then((r) => r.json()) 
        .then((cat) => 
        { 
         if(!curId.includes(cat.id)) subCatList.push({id: cat.id, name: cat.name}); 
         curId.push(cat.id); 
        }); 
      }); 

      return Promise.all(promises) 
       .then(() => ({'subCatList':subCatList, 'posts':data})); 
     }); 
} 

お知らせ：

あなたの変更されたコードは、そのようになります。そうすれば、配列の約束が完了してpushがsubCatListになると確信できます。

また、fetchAccordionDataのインターフェースがまったく同じとどまっていることは注目に値しますので、あなたがあなたの元の例で行ったようにそれを使用することができるはずです。

fetchAccordionData().then((data) => { 

    console.log(data.subCatList, data.posts); 

    for(let cat of data.subCatList) { 
     console.log(cat); 
    } 
}); 

Answer 2

それは

return {'subCatList':subCatList, 'posts':data} 

のように見えます

は、残りのAPIからカテゴリを取得する関数の一部ではありません。

data.map((post) => 
      { 
       let catList = post.categories.filter((c) => c !== parseInt(id)); 
       fetch(wpRestAPI + 'categories/' + catList[0]) 
        .then((r) => r.json()) 
        .then((cat) => 
        { 
         if(!curId.includes(cat.id)) subCatList.push({id: cat.id, name: cat.name}); 
         curId.push(cat.id); 
        }); 
      }); 

では、APIからカテゴリデータを取得する前に関数が返すようにしています。最後の文の後にreturn文を置くと、探しているデータが返されます。

data.map((post) => 
      { 
       let catList = post.categories.filter((c) => c !== parseInt(id)); 
       fetch(wpRestAPI + 'categories/' + catList[0]) 
        .then((r) => r.json()) 
        .then((cat) => 
        { 
         if(!curId.includes(cat.id)) subCatList.push({id: cat.id, name: cat.name}); 
         curId.push(cat.id); 
         return {'subCatList':subCatList, 'posts':data} 
        }); 
      });