如何检查我的 http 请求是否成功？

Question

我有一个 returns 球员照片的获取请求，但如果没有实际球员的照片，我会收到错误代码 403，并且不会显示任何内容。

如何解决？

这是服务：

public GetPlayerImage(id: number): Promise<Blob>{
    return  this.http.get<Blob>('https://divanscore.p.rapidapi.com/players/get-image?playerId=' + id, {
      headers: {
        'x-rapidapi-host': 'divanscore.p.rapidapi.com',
        'x-rapidapi-key': 'XXXX'
      },
      responseType: 'blob' as 'json'
    }).toPromise();
  }

这是component.ts:

ngOnInit(): void {
    this.route.queryParams.subscribe(async (params) => {

      if (params.playerId !== null && params.playerId !== undefined) {
        this.player = await this.playerService.GetOnePlayer(params.playerId);
        this.playerClub = await this.playerService.GetOnePlayerClub(params.clubId);
        await this.getImageFromService();
        this.isLoading = false;
      }
    });
  }

createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener('load', () => {
      this.imageToShow = reader.result;
    }, false);

    if (image) {
      reader.readAsDataURL(image);
    }
  }

  async getImageFromService() {
    this.createImageFromBlob(await this.playerService.GetPlayerImage(this.player.playerId));
  }

更新

它现在显示了，但它在控制台中仍然是红色并指示错误...如何解决这个问题？

Image

Answer 1

首先。你有拦截器吗？

如果没有，我们可以这样抓：

async getImageFromService() {
   const imageContent = await this.playerService.GetPlayerImage(this.player.playerId).catch((error) => {
       // error will come here.
   })

   this.createImageFromBlob(content);
  }

或者你可以try/catch

async getImageFromService() {
   try {
     const imageContent = await this.playerService.GetPlayerImage(this.player.playerId);
     this.createImageFromBlob(content);

   } catch (error) {
     // the error will be there
   }
  }

如何检查我的 http 请求是否成功？

How can I check the success of my http request?

http

http-status-codes

promise

angular