Как вы заменяете HttpClient в Aurelia?

Я новичок в 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);
  }
}

Ответ 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

Ответ 2

Существует еще одна возможность предоставить статические данные для приложения во время разработки. Скелет навигации уже поставляется с Gulp и BrowserSync, поэтому мы использовали их для подделки вызовов API.

Скажем, вы загружаете данные JSON из виртуального каталога /api, например,

GET /api/products

В этом случае вам просто нужно две вещи, чтобы подделать его.

Поместите свои данные в файлы

Перейдите в корневую папку вашего приложения Aurelia и создайте папку /api.

Создайте подпапку /api/products и поместите новый файл с именем GET.json. Этот файл должен содержать JSON, например

GET.json

[ { "id": 1, "name": "Keyboard", "price": "60$" },
  { "id": 2, "name": "Mouse", "price": "20$" },
  { "id": 3, "name": "Headphones", "price": "80$" }
]

Настроить BrowserSync, чтобы высмеять ваши вызовы API

Перейдите в папку /build/tasks и отредактируйте файл serve.js. Измените определение задачи serve на следующий код:

gulp.task('serve', ['build'], function(done) {
  browserSync({
    online: false,
    open: false,
    port: 9000,
    server: {
      baseDir: ['.'],
      middleware: function(req, res, next) {
        res.setHeader('Access-Control-Allow-Origin', '*');

        // Mock API calls
        if (req.url.indexOf('/api/') > -1) {
          console.log('[serve] responding ' + req.method + ' ' + req.originalUrl);

          var jsonResponseUri = req._parsedUrl.pathname + '/' + req.method + '.json';

          // Require file for logging purpose, if not found require will 
          // throw an exception and middleware will cancel the retrieve action
          var jsonResponse = require('../..' + jsonResponseUri);

          // Replace the original call with retrieving json file as reply
          req.url = jsonResponseUri;
          req.method = 'GET';
        }

        next();
      }
    }
  }, done);
});

Теперь, когда ваш запуск gulp serve, BrowserSync будет обрабатывать ваши вызовы API и обслуживать их из статических файлов на диске.

Вы можете увидеть пример в github repo и более подробное описание в Mocking API звонки в Aurelia.