您如何在Aurelia中替代HttpClient？

您如何在Aurelia中替代HttpClient？

要使原始文章中的演示代码达到可以替代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  })};

第三步：

重新配置容器以使用http模拟：

在第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