aurelia-fetch-clientを使用した場合のTypeError

Question

私はaurelia-fetch-clientバージョン1.0.1を使用しています。

私が作成したサービスクラス内のフェッチを実行し、私はというエラーを取得：

TypeError: Cannot read property 'isProtoTypeOf' of undefined at eval [filepath]aurelia-fetch-client.

実際のエラーは、ライン134上のファイルオーレリア・フェッチ・クライアントにスローされているがコードがある：

このコードは、オーレリア・フェッチ・クライアントからです：

var promise = processRequest(request, this.interceptors).then(function (result) { 
    var response = null; 

    if (Response.prototype.isPrototypeOf(result)) { <<--PROBLEM IS HERE!!!! LINE 134 
     response = result; 
    } else if (Request.prototype.isPrototypeOf(result)) { 
     request = Promise.resolve(result); 
     response = fetch(result); 
    } else { 
     throw new Error('An invalid result was returned by the interceptor chain. Expected a Request or Response instance, but got [' + result + ']'); 
    } 

    return request.then(function (_request) { 
     return processResponse(response, _this.interceptors, _request); 
    }); 
    }); 

上記を参照してください。私は、エラーを投げるコードの行に注釈を付けました。 「プロトタイプ」はnullなので、指定されたエラーメッセージを返します。

これまでのプロジェクトでは、すべてaurelia-fetch-clientのベータ版を使用していました。以下のコードは、aurelia-fetch-clientのベータ版を呼び出すコードに非常に似ています。

documentationには、このためにポリフィルをロードする必要があると記載されているため、指定したとおりに「フェッチ」ポリフィルをロードします（main.jsでこれを実行しています）。私はここでサービスにロードすると同じことが起こります。

経験豊かな人がいますが、どのように解決しましたか？ここで

は、サービスコールと基本サービスのいくつかのコードです：

import {inject} from 'aurelia-framework'; 
import {Configure} from 'aurelia-configuration'; 
import {HttpClient} from 'aurelia-fetch-client'; 

export class ServiceBase { 

    // ************************************************************* 
    // Services Constructor 
    // Sets up the base http Client configuration 
    // ************************************************************* 
    constructor(configure, httpClient) { 

     // Set up configuration and initial user token 
     this.userToken = 'tokenvalue'; //TODO: put real one in later, not used on this call 
     this.configure = configure; 
     this.httpClient = httpClient; 

     this.httpClient.configure(config => { 
      config 
       .withBaseUrl(this.configure.get('servicesBaseUrl')) 
       .withDefaults({ 
        headers: { 
         'content-Type': 'application/x-www-form-urlencoded', 
         'Accept': 'application/x-www-form-urlencoded', 
         'X-Requested-With': 'Fetch' 
        }, 
        mode: 'cors' 
       }) 
       .withInterceptor({ 
        request(request) { 
         console.log('KCU Class Requesting: ' + request.method + '; ' + request.url); 
         return request; 
        }, 
        response(response) { 
         console.log('KCU Class Received: ' + response.status + '; ' + response.url); 

         if (response.status !== 200) { 
          throw response; 
         } else { 
          return response; 
         } 

        }, 
        requestError(err) { 
         console.log('Request Error Receieved: ' + err.toString()); 
        } 
       }); 
     }); 

    } 

} 

と、この基本クラスを拡張したサービス：プロジェクト全体に関する情報である

import {inject} from 'aurelia-framework'; 
import {HttpClient, json} from 'aurelia-fetch-client'; 
import {Configure} from 'aurelia-configuration'; 
import {ServiceBase} from './serviceBase' 

@inject(Configure, HttpClient) 

export class HospitalService extends ServiceBase { 

    constructor(configure, httpClient) { 
     super(configure, httpClient); 

     this.configure = configure; 

    } 

    // **************************************** 
    // Extracts the list of hospitals for the initial search grid 
    // **************************************** 
    getHospitalListSearchGridData() { 

     let urlCompletion = ''; 

     return this.httpClient.fetch(
      this.configure.get('HospitalSearch') + urlCompletion, // This is the method name on the service to call 
      { 
       method: 'get', 
       headers: { 
        'Authorization': 'Bearer ' + this.userToken.toString() 
       } 
      }    
      ) 
      .then(response => response.json()) 
      .then(responseInfo => { 
       return responseInfo; 
      }) 
      .catch(error => { 
       return false; 
      }); 

    } 

} 

もう少しこれは既存のASP.NET MVCプロジェクトの内部に構築されていることを示します。新しい領域が生まれ、新しいファイル群が生まれ、ファイルや依存関係を素早くカプセル化することができますが、データインタフェースを提供する既存のサービス層を利用することができます。

Answer 1

これに遭遇する可能性のある人（または同様の人）のために、私は問題の原因を見つけました。

これはpolyfillとは関係ありませんでした。 JSコードはChromeの最新バージョン（v 54.xxx）で動作しました。それは古いブラウザではなかったので、polyfillは誤りがありませんでした。何が問題はjavascriptファイルの衝突でしたか？

「応答」オブジェクトは何とかオーバーライドされていましたが、どこで判断する必要がありましたか。これは大規模なASP.NET MVCアプリケーションの中に住んでいるので、私はアプリケーションツリーをメインアプリケーションのスクリプトファイルにルックアップし、実際にはresponse.jsファイルが使用されていることがわかりました。アプリケーションスイートのサービスレイヤへのアクセスを支援するために、これまでに実装されていました。

これを削除すると、aurelia-fetch-clientは広告として動作しました。問題は、サービスにアクセスする既存のコードの一部が正しく動作しないことです。その解決策は、この記事の範囲を超えています。ボトムライン、それはJSが問題を引き起こして衝突していた。