Angular2 自定义请求答案

【问题标题】：Angular2 custom requestAngular2 自定义请求
【发布时间】：2016-12-22 13:03:24
【问题描述】：

我正在使用自定义 HTTP 请求类为我的所有请求添加授权标头，这几乎适用于所有 android 设备。现在连线的事情是，我收到了一些客户投诉，他们收到了“没有互联网连接”错误，尽管他们有一个有效的网络连接（其他应用程序工作并且错误也被传输到 Sentry 服务器）。当我使用 Sentry 错误跟踪时，我发现这些客户都收到了错误，因为在应用程序启动时的第一个请求 10 秒后会引发超时错误。我猜想这个请求一定有问题，所以我为有限数量的用户构建了一个 alpha 版本来追踪错误（我将每个请求的选项发送给 Sentry），但请求看起来很好。下一个猜测是这些设备上的cordova-plugin-nativestorage 有问题，但是当我抓住它们时，它至少应该返回一个空令牌。现在不知道如何修复它。任何建议表示赞赏！

export class CustomRequest {
  apiToken: string = '';

  constructor(private http: Http) { }

  protected request(options: any): Observable<any> {

    // If Native Storage doens't find a token, return an empty
    let errorNativeStorage$ = function (): Observable<any> {
      return Observable.of({ Token: '' });
    };

    // Get Token form Native Storage
    let token$ = Observable.fromPromise(NativeStorage.getItem('JWT'))
      .catch(errorNativeStorage$);

    // Handle request errors
    let genericError$ = function (error: Response | any): Observable<any> {
      let errMsg: string;
      if (error instanceof Response) {
        const body = error.json() || '';
        const err = body.error || JSON.stringify(body);
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
      } else {
        errMsg = error.message ? error.message : error.toString();
      }

      console.error(errMsg);
      Raven.captureException(error, { extra: { errorMsg: errMsg } });

      return Observable.of({
        Errors: { General: 'No internet connection.' }
      });
    };

    // the request
    let request$ = (options) => {
      return this.http.request(new Request(options))
        .retryWhen(error => error.delay(1000))
        .timeout(10000, new Error('timeout'))
        .map((res: Response) => res.json())
        .catch(genericError$);
    };

    // get the token and build request
    return token$
      .map(jwt => {
        if (options.body) {
          if (typeof options.body !== 'string') {
            options.body = JSON.stringify(options.body);
          }
          options.body = options.body.replace(/ /g, '').replace(/\r?\n|\r/g,   '');
        }

        options.headers = new Headers({
          'Content-Type': 'application/x-www-form-urlencoded,      application/json'
        });

        if (jwt.Token) {
          options.headers.append('Authorization', `Bearer ${jwt.Token}`);
        }

        Raven.captureMessage('request options', { level: 'info',    environment: 'live', extra: options });
        return options;
      })
      .switchMap(options => request$(options));
  }
}

我正在使用：

离子 2.0.0-beta.11
Angular 2.0.0-rc.4
来自 github 的最新版本的 NativeStorage 插件

有错误的设备（只有两个例子，还有更多）：

三星 SM-N910F（Webview：Chrome Mobile 53.0.2785，Android 6.0.1）
三星 SM-G800F（Webview：Chrome Mobile 53.0.2785，Android 5.1.1）

【问题讨论】：

标签： android cordova angular httprequest ionic2

【解决方案1】：

如果有人感兴趣：根本原因是升级 Android 的人不知何故丢失了 chrome webview 应用程序，而 Angular 没有它就无法工作（当然）。我通过在我的应用中打包 crosswalk-webview 解决了这个问题！

【讨论】：