typescript - 带有 Typescript 和异步函数的 Aurelia : this is undefined

Question

我在 aurelia 中使用 typescript ，我想我找不到将变量放入正确范围的方法。

// detail.ts
import {autoinject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import {pApi} from './resources/services/APIService';

let http = new HttpClient();
let httpApi = new pApi(http);

@autoinject
export  class PatDetail {

    newDialog(patId, cat) {
    let burl: string = 'bar/foo/list/';
    const eurl: string = 'foo/bar/list/' + patId + '/';
    let result: string[] = httpApi.getLists(eurl, burl);
    }
}

这是 API 服务文件:

// APIService.ts
import {autoinject} from 'aurelia-framework';
import {HttpClient, json} from 'aurelia-fetch-client';

@autoinject
export class pApi {
    constructor(private http: HttpClient) {
        http.configure(config => {
            config
                .useStandardConfiguration()
                .withBaseUrl('http://localhost:8000/')
        });
    }

getLists(eurl, burl) {
    async function getQuote() {
        await this.http.fetch(eurl)
        .then(resp => resp.json())
        .then(data => {
            console.log(data)
            return data
        })
        .catch(error => console.log(error))
    }


    async function getBlock() {
        await this.http.fetch(burl)
        .then(resp => resp.json())
        .then(data => {
            console.log(data)
            return data
        })
        .catch(error => console.log(error))
    }

    async function getBoth() {
        return await Promise.all([getBlock])
    }

    getBoth().then(results => {
        console.log(results)
        return results
    });
}

运行这个会抛出错误:

Unhandled rejection TypeError: this is undefined

其实我想同时跑到独立的Promise，放到一个viewModel里面。也许我也可以像普通的 Promise-call 一样运行它。但我认为相当新的 async/await 调用适合这个解决方案。

到目前为止，我找不到任何适合我的问题的解决方案/解释。由于我是 Typescript 和 Aurelia 的新手，所以我被困住了。感谢您解释为什么会发生此错误或更好的方法。

Answer 1

编辑:稍微重写了我的答案

Donovan 的回答是正确的，即由于作用域问题，您需要使用箭头函数而不是常规函数，但我会更进一步说您可能不应该那样内联它们。

Async 旨在摆脱 then 的困扰。如果您使用异步，最好充分利用它。你会像这样重写你的方法:

async getLists(eurl, burl) {
    const results = await Promise.all([
        this.getQuote(eurl),
        this.getBlock(burl)
    ]);

    console.log(results);
    return results;
}


async getQuote(eurl) {
    try {
        const resp = await this.http.fetch(eurl);
        const data = await resp.json();
        console.log(data);
        return data;
    } catch (error) {
        console.log(error);
    }
}

async getBlock(burl) {
    try {
        const resp = await this.http.fetch(burl);
        const data = await resp.json();
        console.log(data);
        return data;
    } catch (error) {
        console.log(error);
    }
}

或者坚持你的方法，去非异步，简单地将 Unresolved promise 放在一个数组中，然后你可以在最后 .all :

getLists(eurl, burl) {
    const block = this.http
        .fetch(eurl)
        .then(resp => resp.json())
        .then(data => {
            console.log(data);
            return data;
        })
        .catch(error => console.log(error));

    const quote = this.http
        .fetch(burl)
        .then(resp => resp.json())
        .then(data => {
            console.log(data);
            return data;
        })
        .catch(error => console.log(error));

    return Promise.all([block, quote])
        .then(results => {
            console.log(results);
            return results;
        });
}

但是混合它们=维护 hell :)