Question

我进行了一次api调用，以返回一组数据（例如：users-列表类型，使用返回的数据，我创建了一个for循环，并且在我的for循环中，我进行了另一个api调用，以基于以下信息获取用户的个人资料详细信息用户的ID。我知道这不是最佳做法，我想知道如何才能对其进行重构。

api.get(...).then(response => { 
   this.users = response; 
   for(let i=0; i<this.users.length; i++){
     api.get(...this.users[i].id).then(response => {
       if(response.name == this.users[i].name)
         this.newList.push(response);
     })
   }
})

，在我的html中，我遍历this.newList以显示我需要的信息。

我如何从for循环中删除嵌套的api调用，但仍然获得相同的结果？

Answer 1

一种可能的解决方案是使用async/await。尽管这不会删除嵌套循环，但会使代码看起来更好

示例

async function getUsersAndProfiles () {
    try {
        this.users = await api.get(...); 
        for(let i=0; i<this.users.length; i++){
            let response = await api.get(...this.users[i].id);
            if (response.name == this.users[i].name)
                this.newList.push(response);
        }
    }
    catch (e)
        console.log(e);
}

您甚至可以将对用户配置文件的api调用移至另一个异步函数，以备将来可能的重用和更好的代码结构

Answer 2

在将请求数组推入数组之后，我们可以一次使用Promise.all（）发出请求，然后我们可以基于结果数组创建newList。

 api.get(...).then(response => {
    this.users = response;
    const promises = this.users.map(user => api.get(...user.id))
    const result = Promise.all(promises).then(result => {
        this.newList = results.filter((user, i) => user.name === this.users[i].name)
    })
})

从for循环中删除嵌套的api调用

2 个答案: