javascript - 如何在 Angular 中调用另一个函数内的函数

标签 javascript angular

我正在建立一个在线商店,我正在使用 paystack payment gateway ,在 api 中,我尝试在支付网关 api 内运行一个函数,但它不起作用。这是代码:

payWithPaystack(returnData, amount){
    const binded = this.service.completePayment.bind(this)
    var handler = PaystackPop.setup({
        key: '.......',
        email: this.details.email,
        amount: amount,
        currency: "NGN",
        ref: `ref-${Math.ceil(Math.random() * 10e13)}`, 
        metadata: {
            custom_fields: [{
                display_name: this.details.firstName+' '+this.details.lastName,
                variable_name: "mobile_number",
                value: this.details.phoneNumber
            }]
        },  
        callback(res){
            console.log(res)                
            binded(res);
        },
        onClose(){
            console.log('window closed');
            this.color='danger'
            this.payDisplay='Transaction closed'    
            this.payClick=false
        }
    });
    handler.openIframe();
}

在服务页面中,这是代码

completePayment(sentData){
    console.log('enter')
    this.http.post(`${this.ApiURL}payAm.php`, sentData, {headers:this.headers})
    .subscribe(data=>console.log('ok'), error=>console.log(error))
}

现在的问题是函数completePayment正在部分调用,console.log正在运行,但它没有发送http请求,请问我该如何解决这个问题

最佳答案

编写 payWithPaystack 方法,使其返回一个 promise :

payWithPaystack(amount){
    return new Promise( (resolve,reject) => {
        var handler = PaystackPop.setup({
            key: '.......',
            email: this.details.email,
            amount: amount,
            currency: "NGN",
            ref: `ref-${Math.ceil(Math.random() * 10e13)}`, 
            metadata: {
                custom_fields: [{
                    display_name: this.details.firstName+' '+this.details.lastName,
                    variable_name: "mobile_number",
                    value: this.details.phoneNumber
                }]
            },  
            callback(res){
                console.log(res)                
                //RESOLVE promise
                resolve(res);
            },
            onClose(){
                console.log('window closed');
                //REJECT promise
                reject('window closed');
            }
        });
        handler.openIframe();
    });
}

然后使用它返回的 promise :

this.payWithPaystack(amount)
 .then( sentData => {
    console.log('enter', sentData);
    this.http.post(`${this.ApiURL}payAm.php`, sentData, {headers:this.headers})
    .subscribe(data=>console.log('ok'), error=>console.log(error))
}).catch( reason => {
    console.log("rejected: ", reason);
    this.color='danger'
    this.payDisplay='Transaction closed'    
    this.payClick=false;
});

Promise 是链接异步操作的最佳方式。

关于javascript - 如何在 Angular 中调用另一个函数内的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58975067/

相关文章:

javascript - Node : trying to use `async function` throwing error

javascript - JavaScript 'classes' 定义方法的区别

Angular 2 : System import app not working without file extension

javascript - session 奇怪地返回 null

javascript - ionic : Why are my images not loading from my json file?

javascript - 为什么 array.push 有时比 array[n] = value 快?

javascript - 在 JavaScript 中验证带括号的 URL

angular - 如何在 Angular html中以逗号分隔的字符串打印数组

angular - 无法读取未定义的属性 'getSymbolByModule' 中的错误

angular - 在 Typescript (Angular2 ionic2) 中访问 SASS 值($colors from variables.scss)