Aurelia 打字稿加载 json 服务

Question

我正在尝试创建一个具有两个功能的 class： 1) 从存储在我的本地服务器中的 json 加载项目，并 return 该变量包含所有项目。 2) Return 按 id 的单个项目。问题是我想在不同的模块中使用这两种方法，但我不知道如何实现和使用该模块。到目前为止，我已经可以用aurelia的fetch client实现http部分了，但是我不知道怎么实现这个功能：

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);'，而是想 return，但到目前为止，唯一可行的似乎是将 returned 项目分配给本地 class 'this.items = data' 变量。只要我有一个允许这样做的函数，我就可以接受：

let items = getItems();

和

let item = getItemById(id);

编辑：已解决

用户应该注意，为了使它起作用，他们应该在 tsconfig.js:

"target": "es6"

因为async/await至少需要ES2015。

Answer 1

client.fetchreturn是一个承诺，所以你只需要return它：

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

要使用函数：

getItems(url)
  .then(data => this.someProperty = data);

Answer 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());

}

Aurelia 打字稿加载 json 服务

Aurelia typescript load json service

json

aurelia

aurelia-fetch-client

使用async / await

使用`async` / `await`