回調函數完成后執行代碼

Question

我想在此代碼 Ts 文件中的所有回調完成后執行 addFormLayoutSectionFieldsView() 函數

webPart._getListDataSources(xComp).then((response) => {
            let dItems: List_Item[] = response.value;
            dItems.forEach((item: List_Item) => {
              dataSourceId = item["Id"];
              webPart._getListDataSourceFieldsData(dataSourceId).then((response) => {
                let pItems: List_Item[] = response.value;
                pItems.forEach((item: List_Item) => {
                  AddSectionFieldHtml1 += `<option value= "${item["Id"]}"> ${item["Id"]} </option>`;
                  console.log(AddSectionFieldHtml1);
                });
              });
            });
          });
            
webPart.addFormLayoutSectionFieldsView(FormLayoutSectionId);```

         

Answer 1

為了解決這個問題，我一直在使用Promise.all和map

webPart._getListDataSources(xComp).then((response) => {
            Promise.all(response.value.map((item: List_Item) => {
              dataSourceId = item["Id"];
              return webPart._getListDataSourceFieldsData(dataSourceId).then((response) => {
                let pItems: List_Item[] = response.value;
                pItems.forEach((item: List_Item) => {
                  AddSectionFieldHtml1 += `<option value= "${item["Id"]}"> ${item["Id"]} </option>`;
                  console.log(AddSectionFieldHtml1);
                });
              });
            });
          })).then(() =>             
            webPart.addFormLayoutSectionFieldsView(FormLayoutSectionId);
          )```

因此，這里不是僅僅迭代所有項目並執行新的異步調用，而是將每個項目變成一個承諾，使用Promise.all收集該承諾數組，然后當所有承諾完成后，執行傳遞給Promise.all(...).then的回調Promise.all(...).then .

例如，

Promise
  .all([1,2].map(Promise.resolve)
  .then(() => console.log('Done with promises!'))

這會將1和2變成 promise，然后當兩者都解決時，控制台將被登錄。