TypeScript：Promise 內部的錯誤未被捕獲

Question

我正在使用 TypeScript 開發一個 SPFx WebPart。

我有一個 function 來獲得一個團隊的名字（get() 也返回一個承諾）：

  public getTeamChannelByName(teamId: string, channelName: string) {
    return new Promise<MicrosoftGraph.Channel>(async (resolve, reject) => {
      this.context.msGraphClientFactory
        .getClient()
        .then((client: MSGraphClient) =>{
          client
            .api(`/teams/${teamId}/channels`)
            .filter(`displayName eq '${channelName}'`)
            .version("beta")
            .get((error, response: any) => {
              if ( response.value.length == 1) {
                const channels: MicrosoftGraph.Channel[] = response.value;
                resolve(channels[0]);
              } else if (response.value.length < 1) {
                reject(new Error("No team found with the configured name"));
              } else {
                reject(new Error("Error XY"));
              }
            });
          })
        .catch(error => {
          console.log(error);
          reject(error);
        });
    });
  }

我這樣稱呼這個 function ：

  public getConversations(teamName: string, channelName: string, messageLimitTopics: number = 0, messageLimitResponses: number = 0) {
    return new Promise<any>(async (resolve, reject) => {
      try {
        this.getTeamGroupByName(teamName)
          .then((teamGroup: MicrosoftGraph.Group) => {
            const teamId: string = teamGroup.id;
            this.getTeamChannelByName(teamId, channelName)
              .then((teamChannel: MicrosoftGraph.Channel) => {
                const channelId: string = teamChannel.id;
                this.getChannelTopicMessages(teamId, channelId, messageLimitTopics)
                  .then((messages: MicrosoftGraph.Message[]) => {
                    const numberOfMessages = messages.length;
                    ... // omitted
                  });
              });
          });
      } catch(error) {
        reject(error);
      }
    });
  }

而這個getConversations() function 本身是從我的 webpart 代碼中調用的：

  public getConversations() {
    if (this.props.teamName && this.props.teamName.length > 0 &&
        this.props.channelName && this.props.channelName.length > 0) {
      GraphService.getConversations(this.props.teamName, this.props.channelName, this.props.messageLimitTopics, this.props.messageLimitResponses)
          .then((conversations) => {
              .. // omitted
          })
          .catch((err: Error) => {
            console.log(err);
            this.setState({errorMessage: err.message});
          });
    } else {
      // Mandatory settings are missing
      this.setState({errorMessage: strings.MandatorySettingsMissing});
    }
  }

因此，正如您在上面看到的，我想寫出我從getConversations()函數中的reject接收到的錯誤（消息）。 問題是，我沒有收到帶有錯誤的拒絕，但在控制台中我看到以下內容：

Uncaught Error: No team found with the configured name

我在 getTeamChannelByName() 中添加了您在上面看到的getTeamChannelByName() .catch()塊，但這在調試期間不會受到影響。

沒有對承諾進行太多工作，我仍然對它們有些困惑，所以我想我可能錯誤地構建了 promise 鏈，可能將 catch 塊放置在錯誤的位置？

Answer 1

我查看了 Promises 的常見錯誤，我當然有所謂的“Promise Hell”。

所以，我還不是 100% 確定，但我想，這樣做的結果是我的.then("Promise")沒有捕獲塊，所以拒絕無處可去。

我現在已將調用方法更改為此，並且我還刪除了 try/catch 塊，因為它是不必要的：

public getConversations(teamName: string, channelName: string, messageLimitTopics: number = 0, messageLimitResponses: number = 0) {
    return new Promise<any>(async (resolve, reject) => {
      let teamId: string = null;
      let channelId: string = null;
      this.getTeamGroupIdByName(teamName)
        .then(tId => {
          teamId = tId;
          return this.getTeamChannelIdByName(teamId,channelName);
        })
        .then(cId => {
          channelId = cId;
          return this.getChannelTopicMessages(teamId, channelId, messageLimitTopics);
        })
        .catch(error => {
          reject(error);
        });
    });
  }