Question

我正在使用带有aurelia的打字稿，我想我无法找到将变量放入正确范围的方法。

// 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);
    }
}

这是Apiservice文件：

// 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
    });
}

运行它会抛出错误：

未处理的拒绝TypeError：这是未定义的

实际上我想同时运行到独立的Promise并将它们放入viewModel中。也许我也可以将它作为普通的Promise-call运行。但我认为相当新的async / await调用适合这个解决方案。

到目前为止，我无法找到适合我的问题的合适解决方案/解释。因为我是新手稿和奥里利亚的新手，所以我被困了。感谢您解释为什么会出现此错误或更好的方法。

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);
    }
}

或者坚持你的方法，去非异步，只需将未解决的promises放在一个数组中，然后你可以.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;
        });
}

但混合它们=维护地狱：）

Answer 2

这：

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

应该是这个（丢失“function”关键字）：

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

使用“function”关键字会丢失当前对象的上下文，而“this”仅在函数中变为本地。

Aurelia使用Typescript和async函数：这是未定义的

2 个答案: