ajax - 在 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
   }

请注意，我已从身份验证库中删除了一些代码以减少困惑

总的来说，所有这些都运作良好。当 401 和 404 发生时，拦截器就会被触发，如果我添加一个 500，它也会被处理，所以一切都很好。

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

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

我预计，如果无法到达服务器或发生其他一些基本通信故障，则会触发此捕获而不是“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

好吧......所以，经过一个漫长而艰难的下午，我们发现，整个事情实际上与“BlueBird promise 库”的报告问题有关，而“BlueBird promise 库”正是aurelia用来管理的这是 promise 。

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

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

最重要的是，该库的设计目的不是抛出它直接生成的错误(如问题页面上的示例所示)

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

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

一些标记需要转到“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 Promise 库以大致相似的方式工作。