你如何替代Aurelia的HttpClient？ [英] How do you substitute HttpClient in Aurelia?

问题描述

我是Aurelia的新手。

I'm brand new to Aurelia.

如何更改以下代码以提供虚拟HttpClient，例如：相反，json读取器只提供一组静态的json数据，无需开发中的服务器。

How would you change the following code to provide a dummy HttpClient, e.g. a json reader instead that would provide just a static set of json data, negating the need for a server in development.

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

推荐答案

这里有将原始帖子中的演示代码转换为我们可以替换HttpClient实现的状态所需的几个步骤。

There's a couple steps required to get the demo code in your original post to a state where we can substitute HttpClient implementations.

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

Remove the configuration code in the class's constructor...

这些行：

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文件应如下所示：

Now our users.js file should look like this:

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。

Step 2:

Mock the HttpClient.

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

The user.js module only uses the fetch method which returns a Response object that has a json method. Here's a simple mock:

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

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

第3步：

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

Step 3:

Reconfigure the container to use the http mock:

在第1步中，我们在中添加了 configureContainer 函数main.js 在容器中注册已配置的HttpClient实例的模块。如果我们想使用我们的模拟版本， configureContainer 函数将更改为：

In step 1 we added a configureContainer function to the main.js module that registered a configured HttpClient instance in the container. If we wanted to use our mock version the configureContainer function would change to this:

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

More info on configuring the container here: https://github.com/aurelia/dependency-injection/issues/73

这篇关于你如何替代Aurelia的HttpClient？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！