你如何在 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 文件:

ma​​in.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 方法的 Response 对象.这是一个简单的模拟:

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 mock:

Step 3:

Reconfigure the container to use the http mock:

在第 1 步中，我们向 main.js 模块添加了一个 configureContainer 函数，该模块在容器中注册了一个已配置的 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:

ma​​in.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屋！