Async/Await 地图函数 ionic 4,typescript 无法正常工作

Question

正如我在标题中提到的，我有一个包含 map 函数的方法。

我正在使用 ionic 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 reactions，它 returns 一个 objects 的数组。但问题是，尽管 await 的前缀如上所示 console.log() 首先执行，然后方法是 called.Hence 我得到 x["user_reaction"] 未定义。

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

Answer 1

让你的getCreativeReactions方法return成为一个有决心的承诺

像这样

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
        })
    });
}

Async/Await 地图函数 ionic 4,typescript 无法正常工作

Async/Await not working properly with map function ionic 4,typescript

typescript

ionic4

angular7