我正在尝试创建一个具有两个函数的类:1) 从存储在本地服务器中的json加载项目,并将该变量与所有项目一起返回。2) 按id返回单个项目。问题是我想从不同的模块中使用这两种方法,我不知道如何实现模块并使用它。到目前为止,我已经能够用aurelia的fetch客户端实现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);"我想返回它,但到目前为止,唯一可行的方法是将返回的项分配给一个具有"this.items=data"的局部类变量。只要我有一个允许这样做的函数,我就可以接受:
let items = getItems();
和
let item = getItemById(id);
编辑:已解决
用户应该注意,为了实现这一点,他们应该在tsconfig.js:中包含这一点
"target": "es6"
因为async/await至少需要ES2015。
使用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
返回一个promise,所以您只需要返回它:
return client.fetch(url)
.then(response => response.json());
使用功能:
getItems(url)
.then(data => this.someProperty = data);