Aurelia машинопись загрузка службы JSON

Я пытаюсь создать класс, который будет иметь две функции: 1) Загрузить элементы из json, хранящиеся на моем локальном сервере, и вернуть эту переменную со всеми элементами. 2) Вернуть один элемент по идентификатору. Проблема в том, что я хочу использовать эти два метода из разных модулей, и я не знаю, как реализовать модуль и использовать его. До сих пор я был в состоянии реализовать часть http с помощью клиента извлечения aurelia, но я не знаю, как сделать функцию:

function getItems() {
   // some http request code
   return fetchedItems;
}

Поскольку код в aurelia.io делает что-то вроде этого (что я пробовал и на самом деле работает, если я печатаю данные):

import 'fetch';
import {HttpClient} from "aurelia-fetch-client";

export function getItems(url) {
    let client = new HttpClient();
    client.configure(config => {
      config
        .withBaseUrl('api/')
        .withDefaults({
          credentials: 'same-origin',
          headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'Fetch'
          }
        })
        .withInterceptor({
          request(request) {
            console.log(`Requesting ${request.method} ${request.url}`);
            return request;
          },
          response(response) {
            console.log(`Received ${response.status} ${response.url}`);
            return response;
          }
        });
    });

    client.fetch(url)
      .then(response => response.json())
      .then(data => {
        console.log(data);
      });
  }

Все это работает хорошо. Дело в том, что вместо 'console.log(data);' Я хочу вернуть его, но пока единственное, что, похоже, работает, - это присвоение возвращаемых элементов локальной переменной класса с помощью this.items = data. Я был бы в порядке с этим, пока я получаю функцию, которая позволяет сделать это:

let items = getItems();

А также

let item = getItemById(id);

РЕДАКТИРОВАТЬ: РЕШЕНО

Пользователи должны заметить, что для того, чтобы это работало, они должны иметь это в своем файле tsconfig.js:

"target": "es6"

Потому что async/await требует как минимум ES2015.

Источник

2 ответа

Решение

использование async / await

Если вы используете TypeScript и ориентируетесь на ES6, вы можете использовать await/async ключевые слова.

export async function getItems(url) {
    let client = new HttpClient();
    client.configure(config => {
      config
        .withBaseUrl('api/')
        .withDefaults({
          credentials: 'same-origin',
          headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'Fetch'
          }
        })
        .withInterceptor({
          request(request) {
            console.log(`Requesting ${request.method} ${request.url}`);
            return request;
          },
          response(response) {
            console.log(`Received ${response.status} ${response.url}`);
            return response;
          }
        });
    });

    return await client.fetch(url)
      .then(response => response.json());

}
Источник

client.fetch возвращает обещание, поэтому вам просто нужно его вернуть:

return client.fetch(url)
   .then(response => response.json());

Чтобы использовать функцию:

getItems(url)
  .then(data => this.someProperty = data);
Источник
Другие вопросы по тегам