Async/Await 无法与地图功能 ionic 4、typescript 一起正常工作答案

【问题标题】：Async/Await not working properly with map function ionic 4,typescriptAsync/Await 无法与地图功能 ionic 4、typescript 一起正常工作
【发布时间】：2019-11-02 21:29:14
【问题描述】：

正如我在标题中提到的，我有一个包含地图功能的方法。

我正在使用离子 4。

 async searchedData(data){
      if(this.searchedItems.length == 0){
        this.clearfilter()
      }
      if(data == "cleardata"){
        this.searchedItems = [];
      }
       else{
       //after searching
       console.log(data)     
      await data.map(async x=>{
        x["file_type"] =x.resource_name.substring(x.resource_name.lastIndexOf('.')+1)
        user.forEach(element => {
          if(x["user_id"] == element.id){
                return x["userobj"] = element;
              }
          });
        x["socialIcons"] = this.socialIcons;
        x["user_reaction"] = await this.getCreativeReactions(x)
        console.log(x["user_reaction"]) 
        return x;
      }),

        this.searchedItems = this.searchedItems.concat(data);
      }
    }

问题在于这一行：

x["user_reaction"] = await this.getCreativeReactions(x) 
 console.log(x["user_reaction"])

getCreativeReactions代码如下所示

getCreativeReactions(x:any){
     this.creativeServices.getCreativeReactions1(x["id"],x["userobj"]["id"]).pipe(map(res1=>res1.json())).subscribe(res1=>{
          x["user_reaction"] = res1;
          x["user_reaction"].forEach(element=>{
            switch(element["latestReaction"]){
             case 'like' :{
              x["socialIcons"][0]["color"] = "danger" 
              x["socialIcons"][0]["operation"] = "cancellike"
              break;
             } 
             case "unlike":{
              x["socialIcons"][1]["color"] = "danger" 
              x["socialIcons"][1]["operation"] = "cancelunlike"
              break;  
             }
             case "cancellike":{
             x["socialIcons"][0]["color"] = "default" 
             x["socialIcons"][0]["operation"] = "like"
              break;
             }
             case "cancelunlike":{
             x["socialIcons"][1]["color"] = "default" 
             x["socialIcons"][1]["operation"] = "unlike"
              break;
             }
            }
          })
          return x["user_reaction"]
        })

      }

我有一个方法 getCreative 反应，它返回一个对象数组。但问题是，虽然 await 的前缀如上所示，console.log() 首先执行，然后调用方法。因此我得到 x["user_reaction"] 未定义。

我在使用 map 函数的 async/await 语法上有问题吗？？

【问题讨论】：

你能贴出getCreativeReactions函数的代码吗？
感谢您的回复。我也添加了 getCreativeReactions 代码。
代替return x["user_reaction"]，你能试试resolve(x["user_reaction"])

标签： typescript angular7 ionic4

【解决方案1】：

让你的 getCreativeReactions 方法返回一个带有 resolve 的 Promise

这样

getCreativeReactions(x: any) {
    return new Promise((resolve, reject) => {
        this.creativeServices.getCreativeReactions1(x["id"], x["userobj"]["id"]).pipe(map(res1 => res1.json())).subscribe(res1 => {
            x["user_reaction"] = res1;
            x["user_reaction"].forEach(element => {
                switch (element["latestReaction"]) {
                    case 'like': {
                        x["socialIcons"][0]["color"] = "danger"
                        x["socialIcons"][0]["operation"] = "cancellike"
                        break;
                    }
                    case "unlike": {
                        x["socialIcons"][1]["color"] = "danger"
                        x["socialIcons"][1]["operation"] = "cancelunlike"
                        break;
                    }
                    case "cancellike": {
                        x["socialIcons"][0]["color"] = "default"
                        x["socialIcons"][0]["operation"] = "like"
                        break;
                    }
                    case "cancelunlike": {
                        x["socialIcons"][1]["color"] = "default"
                        x["socialIcons"][1]["operation"] = "unlike"
                        break;
                    }
                }
            })
            resolve(x["user_reaction"]); // here we return the awaited value
        })
    });
}

【讨论】：