你如何替代Aurelia的HttpClient？

Question

我是Aurelia的新手.

您将如何更改以下代码以提供虚拟HttpClient,例如json reader,它只提供一组静态的json数据,从而无需开发中的服务器.

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

@inject(HttpClient)
export class Users {
  heading = 'Github Users';
  users = [];

  constructor(http) {
    http.configure(config => {
      config
        .useStandardConfiguration()
        .withBaseUrl('https://api.github.com/');
    });

    this.http = http;
  }

  activate() {
    return this.http.fetch('users')
      .then(response => response.json())
      .then(users => this.users = users);
  }
}

Answer 1

将原始帖子中的演示代码转换为可替代HttpClient实现的状态需要几个步骤.

步骤1

删除类的构造函数中的配置代码...

这些线:

users.js

...
http.configure(config => {
  config
    .useStandardConfiguration()
    .withBaseUrl('https://api.github.com/');
});
...

应该移动到main.js文件:

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  configureContainer(aurelia.container);  // <--------

  aurelia.start().then(a => a.setRoot());
}

function configureContainer(container) {
  let http = new HttpClient();
  http.configure(config => {
    config
      .useStandardConfiguration()
      .withBaseUrl('https://api.github.com/');
  });
  container.registerInstance(HttpClient, http); // <---- this line ensures everyone that `@inject`s a `HttpClient` instance will get the instance we configured above.
}

现在我们的users.js文件应如下所示:

users.js

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

@inject(HttpClient)
export class Users {
  heading = 'Github Users';
  users = [];

  constructor(http) {
    this.http = http;
  }

  activate() {
    return this.http.fetch('users')
      .then(response => response.json())
      .then(users => this.users = users);
  }
}

第2步:

模拟HttpClient.

user.js模块仅使用fetch返回Response具有json方法的对象的方法.这是一个简单的模拟:

let mockUsers = [...todo: create mock user data...];

let httpMock = {
  fetch: url => Promise.resolve({
    json: () => mockUsers
  })
};

第3步:

重新配置容器以使用http mock:

在步骤1中,我们向模块添加了一个configureContainer函数,该main.js模块在容器中注册了已配置的HttpClient实例.如果我们想使用我们的模拟版本,该configureContainer函数将更改为:

main.js

...

let mockUsers = [...todo: create mock user data...];

let httpMock = {
  fetch: url => Promise.resolve({
    json: () => mockUsers
  })
};

function configureContainer(container) {      
  container.registerInstance(HttpClient, httpMock);
}

有关配置容器的更多信息,请访问:https://github.com/aurelia/dependency-injection/issues/73