时间戳

首页 > 解决方案 > 将http调用的“异步结果”分配给“For循环”中的对象

angular - 将http调用的“异步结果”分配给“For循环”中的对象

问题描述

我正在尝试将响应分配给“for循环”中的对象。由于它是一个异步调用，我无法正确映射它。

    for (var i = 0; i <= data.length; i++) {
      if (data[i]) {
        var obj = {};
        obj['id'] = data[i]['id'];
        obj['firstName'] = data[i]['firstName'];
        obj['lastName'] = data[i]['lastName'];
        if (data[i]['profilePic']) {
          this.getMedia(data[i]['profilePic']['mediaId']).toPromise().then(function (res) {
            let reader = new FileReader();
            reader.addEventListener("load", () => {
              obj['src'] = reader.result;
            }, false);

            if (res) {
              reader.readAsDataURL(res);
            }
          });
        }
        if (!this.containsObject(obj, this.slides)) {
          this.slides.push(obj);
        }
      }
    }


  public getMedia(data: number) {

    return this.http.get(this.baseUrlBackend + '/files/' + data, {
      headers: new HttpHeaders().set('Authorization', 'Bearer ' + this.cookie.get('authToken')),
      responseType: 'blob'
    });
  }

我希望“reader.result”应该与其他对象一起分配给“obj['src']”。

 obj['id'] = data[i]['id'];
        obj['firstName'] = data[i]['firstName'];
        obj['lastName'] = data[i]['lastName'];

标签： angular

解决方案

您正在尝试创建一个数据结构，其中一个键基于getMedia.

一种更简单的方法是使用 async/await.

  1. async用关键字标记包含此 for 循环的方法。
  2. 使用await关键字等待响应。

例子：


async methodName() {
        ... some other code
        .
        .

        for (var i = 0; i <= data.length; i++) {
        if (data[i]) {
            var obj = {};
            obj['id'] = data[i]['id'];
            obj['firstName'] = data[i]['firstName'];
            obj['lastName'] = data[i]['lastName'];
            if (data[i]['profilePic']) {
            const res = await this.getMedia(data[i]['profilePic']['mediaId']).toPromise();
            if (res) {
                let reader = new FileReader();
                reader.addEventListener("load", () => {
                obj['src'] = reader.result;
                }, false);

                if (res) {
                reader.readAsDataURL(res);
                }
            }
            }
            if (!this.containsObject(obj, this.slides)) {
            this.slides.push(obj);
            }
        }
        }
    }

推荐阅读