Aurelias HTTP 客户端中的捕获错误

Question

大家好（特别是 Aurelia 核心团队在这里闲逛）

我有一个 aurelia 应用程序，它使用“aurelia-http-client”向我的后端 API 发出请求。

我的后端 API 是在 Nancy 上运行的基于 C# 的服务。

在我的前端，我将 http 客户端抽象到我自己的网络库中，如下所示：

import { inject } from 'aurelia-framework';
import { Router } from 'aurelia-router';
import { HttpClient } from 'aurelia-http-client';
import environment from './environment';

@inject(HttpClient, Router)
export default class httpservice {

  private http: HttpClient = null;
  private router: Router = null;
  private authService: any = null;
  private authToken: string = "";

  constructor(HttpClient, Router) {

    this.http = HttpClient;
    this.router = Router;

    HttpClient.configure(http => {
      http.withBaseUrl(environment.servicebase);
    });

  }

  public setAuthService(authService: any) {
    this.authService = authService;
  }

  public get(url: string, authObject?: any): any {

    let myAuth = this.authService ? this.authService : authObject;
    let myToken = "";
    if (myAuth) {
      myToken = myAuth.getAuthToken();
    }

    let self = this;
    let client = this.http
      .createRequest(url)
      .asGet()
      .withHeader("AuthenticationToken", myToken)
      .withInterceptor({
        responseError(responseError) {
          console.log(responseError);
          if (responseError.statusCode === 401) {
            if (myAuth) {
              myAuth.destroySession();
            }
          }
          if (responseError.statusCode === 404) {
            self.router.navigateToRoute("missing");
          }
          return responseError;
        }
      });

    return client;
  }

  public post(url: string, postData: any, authObject?: any): any {

    let myAuth = this.authService ? this.authService : authObject;
    let myToken = "";
    if (myAuth) {
      myToken = myAuth.getAuthToken();
    }

    let self = this;
    let client = this.http
      .createRequest(url)
      .asPost().withContent(postData)
      .withHeader("AuthenticationToken", myToken)
      .withInterceptor({
        responseError(responseError) {
          console.log(responseError);
          if (responseError.statusCode === 401) {
            if (myAuth) {
              myAuth.destroySession();
            }
          }
          if (responseError.statusCode === 404) {
            self.router.navigateToRoute("missing");
          }
          return responseError;
        }
      });

    return client;
  }

}

然后我在其他模块/类中使用它，如下所示：

import { Aurelia, inject } from 'aurelia-framework';
import HttpService from './httpservice';
import environment from './environment';
import { EventAggregator } from 'aurelia-event-aggregator';

@inject(EventAggregator, Aurelia, HttpService)
export default class Authservice {

  public http: HttpService = null;
  public app: Aurelia = null;
  public ea: EventAggregator = null;
  public authToken: any = null;

  private loginUrl: string = "";
  private logoutUrl: string = "";
  private checkUrl: string = "";

  constructor(eventAggregator, aurelia, httpService) {

    this.http = httpService;
    this.app = aurelia;
    this.ea = eventAggregator;

    this.loginUrl = "/login";
  }

  public getAuthToken() {
if (!sessionStorage[environment.tokenname] || 
   (sessionStorage[environment.tokenname] == null)) {
      return null;
   }
   return sessionStorage[environment.tokenname];
  }

  public login(loginName, password) {

    let postData = {
      loginName: loginName,
      password: password
    };

    let client = this.http.post(this.loginUrl, postData);

    client.send()
      .then((response) => response.content)
      .then((data) => {

        if (data.error) {
          this.ea.publish("loginMessage", { message: data.errorMessage });
          return;
        }

        if (data.authenticationFailed) {
          this.ea.publish("loginMessage", { message: "Invalid user name and/or password supplied." });
          return;
        }

        if (data.accountSuspended) {
          this.ea.publish("loginMessage", { message: "Your account has been suspended, please contact support." });
          return;
        }

        sessionStorage[environment.tokenname] = data.token;
        sessionStorage["displayedLoginName"] = data.displayName;
        location.assign('#/');
        this.app.setRoot('app');

      })
      .catch(() =>
      {
        debugger;
        alert("Something bad happened trying to connect to server.");
      });
  }

  public isAuthenticated() {
    // TODO: hook this up to check auth token validity via rest call???
    let token = this.getAuthToken();
    return token !== null;
  }

}

enum LoginStates {
  LoginValid = 0,
  BadUserNameOrPassword,
  AccountSuspended
   }

请注意，我已经从 auth 库中删除了一些代码以减少混淆

总的来说，这一切都很好。当 401s 和 404s 发生时，拦截器会被触发，如果我添加一个 500 也会被处理，那么那里一切都很好。

我遇到的问题是处理通信故障。

正如您在登录例程中看到的那样，我在 then 之后有一个问题。

我预计如果无法访问服务器或发生其他一些基本通信故障，则会触发此 catch 而不是“then”，从而允许我处理错误，但事实并非如此。

我得到的是控制台中的这个：

更糟糕的是，我的登录例程并没有中止，它实际上成功并允许显示登录页面。

似乎在库进行 OPTIONS 调用时（发生此错误时）我的用户代码都没有被考虑在内。

成功的飞行前/ajax 请求需要 OPTIONS 调用，所以阻止这种情况发生不是一个选项，我觉得如果 OPTIONS 调用没有中止，而是进入 POST 调用，那就是我的错误然后会考虑处理。

无法捕获这样的错误似乎很愚蠢，尤其是在当今的移动世界中，设备可能不在覆盖范围内或暂时离线。

如果有人对如何解决这个问题有任何想法，我很想听听。

更新 1

我的问题似乎与这个有关： aurelia-fetch-client - a promise was rejected with a non-error: [object Response]

但是，我没有使用“useStandardConfiguration()”，这显然是导致这种情况的原因。我也没有使用 fetch 客户端，但是我注意到两个客户端中的 API 实际上是相同的，所以我想知道底层代码是否也相似。

Answer 1

好吧....所以，经过一个漫长而艰难的下午挠头和拔头发后，事实证明，整个事情实际上与报告的问题有关，即 aurelia 用来管理的“BlueBird 承诺库”这是承诺。

可以在此处找到指向 BlueBird 问题的链接： https://github.com/petkaantonov/bluebird/issues/990

根据 BB 开发者的说法，这并不是一个特别的问题，但对于许多遇到它的人来说，它确实看起来像一个问题。

最重要的是该库并非旨在抛出由它直接生成的错误（如问题页面上的示例所示）

根据 BB 团队的说法，正确的方法是要么完全抛出一个新错误，要么从传递给 Promise 的错误中派生一个新实例，并在重新抛出它之前更改它的参数。

当然，由于 Aurelia 中的抽象，这对我们大多数人来说不是一个选择，除非我们想要更改 http 客户端库代码。

一些标记需要到上面他/她的cmets的“TheBlueFox”。

解决方案最终类似于以下内容：

import { inject } from 'aurelia-framework';
import { Router } from 'aurelia-router';
import { HttpClient, Interceptor } from 'aurelia-http-client';
import environment from './environment';
import Debugger = require("_debugger");

@inject(HttpClient, Router)
export default class httpservice {

  private http: HttpClient = null;
  private router: Router = null;
  private authService: any = null;
  private authToken: string = "";
  private myInterceptors: Interceptor;

  constructor(HttpClient, Router) {

    this.http = HttpClient;
    this.router = Router;

    HttpClient.configure(http => {
      http.withBaseUrl(environment.servicebase);
      http.withInterceptor(new HttpInterceptors());
    });

  }

  public setAuthService(authService: any) {
    this.authService = authService;
  }

  public get(url: string, authObject?: any): any {

    let myAuth = this.authService ? this.authService : authObject;
    let myToken = "";
    if (myAuth) {
      myToken = myAuth.getAuthToken();
    }

    let client = this.http
      .createRequest(url)
      .asGet()
      .withHeader("AuthenticationToken", myToken);

    return client;
  }

  public post(url: string, postData: any, authObject?: any): any {

    let myAuth = this.authService ? this.authService : authObject;
    let myToken = "";
    if (myAuth) {
      myToken = myAuth.getAuthToken();
    }

    let self = this;

    let client = this.http
      .createRequest(url)
      .asPost().withContent(postData)
      .withHeader("AuthenticationToken", myToken);

    return client;
  }

}

class HttpInterceptors implements Interceptor {

  responceError(error)
  {

    if (error.statusCode === 0) {
      throw new Error("Could not contact server");
    }

    if (error.statusCode === 401) {
      // do auth handling here
    }

    if (error.statusCode === 404) {
      // do 404 handling here
    }

    return error;

  }
}

神奇之处在于附加到我的 HttpService 底部的 HttpInterceptors 类。您应该能够看到对状态码 0 的检查，并且此处执行的实际操作是抛出一个新错误。

正是这个新错误被抛出的动作导致了对 http 客户端的实际调用中的“catch”被捕获。

如果你在那一点上不投掷，那么一切都会崩溃，你会看到我原来的问题帖子中看到的场景，投掷，你可以抓住它并在用户代码中处理它。

这种做事方式在 aurelia-fetch-client 中也很明显，因为它以大致相似的方式工作，使用 BlueBird 承诺库。