使用 aurelia-fetch-client 时出现 TypeError

Question

我使用的是 aurelia-fetch-client 版本 1.0.1。

我在我创建的服务 class 中执行提取，但收到一条错误消息：

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

文件 aurelia-fetch-client 的第 134 行出现了实际错误。代码为：

此代码来自 aurelia-fetch-client:

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" 为空，因此它返回给定的错误消息。

我在之前的项目中使用了所有这些，但使用的是 aurelia-fetch-client 的测试版。下面的代码与调用 aurelia-fetch-client beta 版本的代码非常相似。

documentation 声明我需要为此加载一个 polyfill，所以我按照指定加载 "fetch" polyfill（我在 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());
                  }
              });
        });

    }

}

以及扩展此基础的服务 class:

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 文件冲突。

"Response" 对象以某种方式被覆盖，我必须确定在哪里。因为它位于一个更大的 ASP.NET MVC 应用程序中，所以我在应用程序树中查找了主应用程序的脚本文件，发现确实使用了一个 response.js 文件。它很久以前就实现了，以帮助访问我们应用程序套件的服务层。

当它被删除时，aurelia-fetch-client 像宣传的那样工作。现在的问题是一些访问服务的现有代码不能正常工作。解决方案超出了本文的范围。归根结底，是 JS 冲突导致了问题。

使用 aurelia-fetch-client 时出现 TypeError

TypeError when using aurelia-fetch-client

javascript

aurelia

aurelia-fetch-client