无法让 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)
问题是我想在继续我的程序之前确保数据可用,所以我需要使用异步类型的函数。根据 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)