无法让 Promise 在 Ionic2 打字稿中与 Trello 一起工作

Can't get Promise to work with Trello in Ionic2 typescript

问题是我想在继续我的程序之前确保数据可用,所以我需要使用异步类型的函数。根据 ionic.io.

,Promise 似乎是标准方法

我下面有一个非常简单的例子,基本上来自Trello.com网站制作卡片。然后我将 id 加载到一个全局数组中,然后尝试记录它。

//myTry.ts

开始
import {Component} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
//compile needs this and it seems to make the Trello functions work
declare var Trello: any;

@Component({
    templateUrl: 'build/pages/mytry/mytry.html'
})
export class MyTryPage {
    fileEntry: any;
    myData: any;    
    myList: any = "MyList ID - get this from the sandbox screen in Trello.com please";

    newCard = {     
        name: '****My New Test Card', 
        desc: '****This is the description of our new card.',
        idList: this.myList,
        pos: 'top'
    };

    readTrello: any = function() {
        Trello.post('/cards/', this.newCard, this.creationSuccess);
    }

    constructor(private navController: NavController) {

        Trello.authorize({
            type: "redirect",
            interactive: "true",
            name: "My Application",
            scope: {
                read: "true",
                write: "true" },
            expiration: "never",
            success: this.authenticationSuccess,
            error: this.authenticationFailure
        });

        this.testPromise();

        // this line does not work
        console.log('My data ' + this.myData); // returns undefined

     }

    testPromise: any = function () {    
        var p1 = new Promise( resolve => {
            this.readTrello();
            window.setTimeout( () => {
                // this line is run after timeout completes so why is data not available
                console.log("Since this is run after timeout, I expect data to exist???? "+ this.myData);
                resolve(0);
            }, 5000);
        });

        p1.then(
            // Log the fulfillment value
            () => {
                    //This fails - data is NOT available
                    console.log('Promise fullfilled. Data should be available:???? Array is no longer in scope at all????' + this.myData);

                    // I will load into displayable structure here later

                })
        .catch(
            // Log the rejection reason
            function(reason) {
                console.log('Handle rejected promise ('+reason+') here.');
            });
    }



    authenticationSuccess: any = function() {
        //This works
        console.log("Successful authentication"); 
    };
    authenticationFailure: any = function() {
        console.log("Failed authentication");
    };

    creationSuccess: any = function(data) {
        //This works
        console.log('Trello callback successfull');
        this.myData = JSON.stringify(data.id);
        //This works and the data returned is available and correct - great.
        console.log('Card created successfully. Data returned:' + this.myData);
    };

}

我遗漏了一些东西 - 数据在超时前可用但在超时后不可用???显然我的程序流程不正确。 ps 我可以使用令牌执行上述操作,但我想使用 Trello 发布的 API。

如果您希望在函数体内使用 this 关键字时定义它,则必须使用 lambda 函数。

而不是 window.setTimeout( function() { 使用 window.setTimeout(() => {

p1.then 行做同样的事情。

此外,在这一行中:Trello.post('/cards/', this.newCard, this.creationSuccess); 而不是传递 this.creationSuccess 尝试传递 this.creationSuccess.bind(this)