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); 
    }); 
    }); 

위를 참조하십시오. 오류를 던지는 코드 줄에 주석을 추가했습니다. "prototype"은 null이므로 지정된 오류 메시지가 반환됩니다.

이전 프로젝트에서이 모든 작업을 수행했지만 aurelia-fetch-client의 베타 버전을 사용했습니다. 아래 코드는 aurelia-fetch-client의 베타 버전을 호출하는 코드와 매우 유사합니다.

documentation은 polyfill을로드해야하므로 명시된대로 polyfill을로드합니다. main.js에서이 작업을 수행하지만이 오류는 계속 발생합니다. 여기에 서비스에로드하면 똑같은 일이 발생합니다.

경험이 많은 사람이 누구이며 어떻게 해결 했습니까?

이

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; 
      }); 

    } 

} 

조금이 전체 프로젝트에 대한 자세한 내용은 다음과 같습니다이 기본 클래스를 확장

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()); 
        } 
       }); 
     }); 

    } 

} 

및 서비스 : 여기

는 서비스 호출의 일부 코드와 기본 서비스입니다 이것은 기존 ASP.NET MVC 프로젝트의 내부에 구축되고 있다는 것을 의미합니다. 새로운 영역이 생성되어 새로운 일련의 화면이 생겨 파일과 종속성을 멋지게 캡슐화 할 수 있지만 데이터 인터페이스를 제공하는 기존 서비스 계층을 활용할 수 있습니다.

Answer 1

이 문제 (또는 비슷한 문제가있을 수 있음)를 접한 사람들에게 문제의 원인을 발견했습니다.

이것은 polyfill과 아무 관련이 없습니다. JS 코드는 최신 버전의 Chrome에서 작동했습니다 (v 54.xxx). 그리고 오래된 브라우저가 아니기 때문에 polyfill은 잘못이 아닙니다. 문제는 자바 스크립트 파일 충돌이었습니다.

"응답"개체가 어떻게 든 overriddenn되고 나는 어디에서 결정해야했습니다. 이것이 더 큰 ASP.NET MVC 응용 프로그램의 내부에 있기 때문에 기본 응용 프로그램의 스크립트 파일에 응용 프로그램 트리를 조회하여 실제로 response.js 파일이 사용되고 있음을 확인했습니다. 애플리케이션 스위트의 서비스 레이어 액세스에 도움을주기 위해 오래 전에 구현되었습니다.

이 항목을 삭제하면 aurelia-fetch-client가 보급 된대로 작동합니다. 문제는 현재 서비스에 액세스하는 기존 코드 중 일부가 제대로 작동하지 않는다는 것입니다. 그 해결책은이 기사의 범위를 벗어납니다. 결론은 JS가 문제를 일으키고 충돌하는 것입니다.