Angular Observable请求多图接口返回200状态码仍抛出错误问题求助

问题描述 #

我在从postgreSQL数据库获取多张图片并展示到前端时遇到问题。图片以二进制形式存储在postgreSQL中，运行express接口会返回JSON格式的buffer类型图片数据。当前接口返回状态码为200，但Observable最终仍会执行handleError错误处理函数。

实现目标 #

我需要获取对应房屋的多张图片并展示在前端模态页，这些图片存储在数据库的独立表中，通过SQL语句select * from housee.houses_images where straatnaam = $1 AND straatnr = $2 AND postcode = $3可查询到匹配的图片，最终要将图片渲染在ionic框架的ion-img标签中。

代码说明 #

本次使用的技术栈为postgreSQL数据库、基于javascript的express.js后端、Angular前端。

后端index.js核心代码 #

app.get(
  "/getMarkerPhotos/:straatnaam/:straatnr/:postcode",
  function (req, res) {
    client.query(
      "select * from housee.houses_images where straatnaam = $1 AND straatnr = $2 AND postcode = $3",
      [req.params.straatnaam, req.params.straatnr, req.params.postcode],
      function (err, data) {
        if (err != null) {
          res.sendStatus(500);
        } else {
          res.sendStatus(200);
        }
      }
    );
  }
);

前端api.service.ts核心代码 #

getMarkerPhotos(straatnaam: any, straatnr: any, postcode: any): Observable<any> {
    var result = this.http.get(this.url + '/getMarkerPhotos/' + straatnaam + '/' + straatnr + '/' + postcode)
    .pipe(
      catchError(this.handleError)
   );
    console.log(result)
    return result
  }

// other code

private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.log(error.error.message)

    } else {
      console.log(error.status)
    }
    return throwError(
      console.log('Something is wrong!'));
  };

模态页maker-modal.components.ts核心代码 #

ngOnInit() {
    this.getMarkerPhotos();
  }

  getMarkerPhotos() {
    this.api.getMarkerPhotos(this.straatnaam, this.straatnr, this.postcode).subscribe(

      data => {
        console.log(data)
        //this.photos.push(data)
        //console.log(this.photos)
      },
      error => {
        console.log("Subscribe error: " + error)
      }
    );
  }

解决方案 #

1. 修复后端接口返回逻辑 #

触发报错的核心原因是你当前查询到数据后仅返回了200状态码，没有返回实际的图片数据，前端Angular HttpClient默认按JSON解析空响应会直接触发解析错误。修改后端代码，把二进制图片转成base64格式返回：

app.get(
  "/getMarkerPhotos/:straatnaam/:straatnr/:postcode",
  function (req, res) {
    client.query(
      "select * from housee.houses_images where straatnaam = $1 AND straatnr = $2 AND postcode = $3",
      [req.params.straatnaam, req.params.straatnr, req.params.postcode],
      function (err, data) {
        if (err != null) {
          res.sendStatus(500);
          return;
        } 
        // 处理二进制数据转base64，注意修改为你实际表中存储图片的字段名
        const photoList = data.rows.map(item => {
          const base64 = Buffer.from(item.img_binary_field).toString('base64');
          // 按你实际存储的图片类型调整，比如png/webp
          return `data:image/jpeg;base64,${base64}`
        })
        res.json(photoList);
      }
    );
  }
);

2. 调整前端请求（可选） #

如果存在响应解析异常，可给请求增加显式的响应类型配置：

getMarkerPhotos(straatnaam: any, straatnr: any, postcode: any): Observable<any> {
    return this.http.get(this.url + '/getMarkerPhotos/' + straatnaam + '/' + straatnr + '/' + postcode, {
      responseType: 'json'
    })
    .pipe(
      catchError(this.handleError)
   );
}

3. 前端渲染图片 #

拿到base64数组后直接绑定到ion-img的src属性即可：
修改模态页ts代码：

photos: string[] = []

getMarkerPhotos() {
  this.api.getMarkerPhotos(this.straatnaam, this.straatnr, this.postcode).subscribe(
    data => {
      this.photos = data;
    },
    error => {
      console.log("Subscribe error: " + error)
    }
  );
}

模板代码示例：

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let photo of photos">
        <ion-img [src]="photo"></ion-img>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

内容的提问来源于stack exchange，提问作者MichielDW