Question

一旦Array.map完成执行，我想运行一个异步函数。

我正在updateMaterials函数的map方法中进行异步调用，我的目标是在updateMaterials完成执行后调用addDataToDB。

功能1：updateMaterials

 const updateMaterials = recipeRawMaterials => {
    recipeRawMaterials.map((item, index) => {
      updateRawMaterialsDB(item._id, item.rate, index);
    });
  };

异步功能：updateRawMaterialsDB

const updateRawMaterialsDB = async (id, rate, index) => {
    console.log(state.recipeRawMaterials);
    const body = JSON.stringify({
      rate
    });

    console.log(body);

    const config = {
      headers: {
        'Content-Type': 'application/JSON'
      }
    };

    const res = await axios.put(`/api/v1/rawMaterial/${id}`, body, config);

   
  };

 const addDataToDB = async (recipeName, recipeRawMaterials) => {
   

    const config = {
      headers: {
        'Content-Type': 'application/JSON'
      }
    };

    const res = await axios.post('/api/v1/basicRecipe', body, config);
    setLoading();
    
  };

Answer 1

您可以在地图中返回Promise，在Promise完成后，您可以调用addDataToDB函数

const updateMaterials = recipeRawMaterials => {
   const promises =  recipeRawMaterials.map((item, index) => updateRawMaterialsDB(item._id, item.rate, index));
   Promise.all(promises).then(()=>{
       // addDataToDB 
   })
   .catch(e=>{
       //
   })
  };

Answer 2

更常见的方法是使用@Ubeyt Demir的答案，该答案将异步调用收集到一个Promise集合中，然后在这些Promise被解决后触发最终调用。

此答案使用ES2018中的功能，您可以在其中使用异步迭代器。这在ECMA提案https://2ality.com/2016/10/asynchronous-iteration.html

中很好地列出了

因此使用；

for await (const asyncItem of asyncCollection) {
  console.log(asyncItem);
}
console.log("done")

当异步承诺的迭代器已解决时，我们将打印“ done”语句。在您的代码中使用它的外观如下：

items = [{_id: 1, rate: 2, index: 0},
{_id: 2, rate: 3, index: 2}, 
{_id: 3, rate: 4, index: 3}, 
{_id: 4, rate: 5, index: 4}, 
{_id: 5, rate: 6, index: 5},]

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
const updateRawMaterialsDB = async (id, rate, index) => {
    const body = JSON.stringify({
        rate
    });
    console.log(body);
    const config = {
        headers: {
            'Content-Type': 'application/JSON'
        }
    };
    //return axios.put(`/api/v1/rawMaterial/${id}`, body, config);
    return sleep(2000);
};
async function addDataToDB(recipeName, recipeRawMaterials) {
    const config = {
        headers: {
            'Content-Type': 'application/JSON'
        }
    };
    //const res = await axios.post('/api/v1/basicRecipe', body, config);
    //setLoading();
    console.log('All done');
};

async function updateMaterials(recipeRawMaterials) {
    const arrayofPromises = recipeRawMaterials.map((item, index) => {
        updateRawMaterialsDB(item._id, item.rate, index);
    });
    for await (const item of arrayofPromises) {
        console.log("item done");
    }
    addDataToDB('something', recipeRawMaterials)
}
updateMaterials(items);

Answer 3

您不必等待每个+---------+-----------------------------------------------------------------------------------------------------+ | col1| col2| +---------+-----------------------------------------------------------------------------------------------------+ | 100|[('abc', 'customer'), ('product_b', 'product'), ('xyz','customer'), ('product_a', 'product')] | | 101|[('mno', 'customer') | +---------+-----------------------------------------------------------------------------------------------------+ Output: +---------+----------------+-------------------------+ | col1| customer| product | +---------+------------------------------------------+ | 100|['abc', 'xyz'] |['product_b', 'product_a'] | 101|['mno'] | | +---------+------------------------------------------+ root |-- col1: string (nullable = true) |-- col2: array (nullable = true) | |-- element: string (containsNull = true)完成，而应将Promise转换为承诺数组，然后将其传递给recipeRawMaterials，后者接受承诺数组，并返回一个。 / p>

Promise.all

在Array.map之后运行一个函数

3 个答案: