【问题标题】:async await + toPromise hangs异步等待 + toPromise 挂起
【发布时间】:2019-03-06 16:49:22
【问题描述】:

我正在使用 ngx-stripe ,createToken 返回一个 Observable,我尝试将其转换为 Promise,以便我可以使用 Async/await。但是,看起来承诺似乎没有解决。调试不会显示任何内容,并且我的 try/Catch 块不会捕获任何错误。

我想知道我是否正确使用了 toPromise:

import {
    Elements,
    Element as StripeElement,
    ElementsOptions,
    BankAccountData,
    StripeService
} from 'ngx-stripe';

constructor(
    public stripeService: StripeService,

) {}



async next() {
    let token: any;
    let account: BankAccountData = {
        country: this.country,
        currency: this.currency,
        account_holder_name: this.first_name + " " + this.last_name,
        account_holder_type: this.type,
        account_number: account_number,
        routing_number: routing_number
    };

    console.log("--> Creating Bankaccount Token", account);

    try {
        token = await this.stripeService.createToken("bank_account", account).toPromise();
    } catch (excep) {
        console.log(excep);
    }

    console.log("-->Token Generated : ", token);
}

编辑

调试器 - 如果有帮助的话。这是最后一个控制台输出:

创建银行帐户令牌{国家:“AU”,货币:“aud”,account_holder_name:“某人姓名”,account_holder_type:“个人”,account_number:“000123456”,...}

******************************编辑********************* ** 我不知道为什么,但是当我创建一个 stackblitz 时,代码就起作用了。

然后我比较了 stackblitz 中的库并更新了我的 angular、rxjs、rxjs-compat 以匹配 stackblitz 中的内容并再次尝试,我得到了与以前相同的结果。

然后我删除了 toPromise() 并将其更改为:

this.stripeService.createToken("bank_account", account).subscribe(data => {
               console.log(data);
             });

与 stackblitz 中的相比,我不确定是什么限制了我的项目。我不确定如何解决问题所在,我唯一能想到的就是从头开始重建项目。

【问题讨论】:

  • it looks as though the promise dosen't resolve
  • 如需更多帮助,请在您的问题中包含stripeService.createToken 的代码。
  • 嗨,伊戈尔,我只是假设在调试时它到达代码令牌 = 等待....然后就完成了。我检查了网络,并成功访问了 URL 并响应。关于 createToken 它来自我作为链接添加的库 ngx-stripe。
  • 我的问题的开头似乎被切断了,我会编辑它。
  • I checked the network and the URL was reached and responded successfully. token = await ... 之后添加console.log("success ", token);

标签: angular stripe-payments


【解决方案1】:

尝试做 .pipe(take(1)).toPromise()。

查看rxjs内部代码的逻辑。 “解决”仅在完成时被调用(参见下面的代码)。因此,根据您的 observable 的工作方式,您可能无法获得解决方案。然而,即使 observable 不完整,订阅也会在每次值发射时被调用,这就是您的订阅起作用的原因。 "take(1)" 将导致完成,因此应该调用您的承诺。

这是该函数的 rxjs 代码。

Observable.prototype.toPromise = function (PromiseCtor) {
    var _this = this;
    if (!PromiseCtor) {
        if (_root.Rx && _root.Rx.config && _root.Rx.config.Promise) {
            PromiseCtor = _root.Rx.config.Promise;
        }
        else if (_root.Promise) {
            PromiseCtor = _root.Promise;
        }
    }
    if (!PromiseCtor) {
        throw new Error('no Promise impl found');
    }
    return new PromiseCtor(function (resolve, reject) {
        var value;
        _this.subscribe(function (x) { return value = x; }, function (err) { return reject(err); }, function () { return resolve(value); });
    });
};

【讨论】:

  • 嗨,我试过这个(我从 rxjs/operators 导入了 take)并尝试了 createToken("bank_account", account).take(1).toPromise();但我收到“[ts] Property 'take' does not exist on type 'Observable'.”
  • 我把它改成了 createToken("bank_account", account).pipe(take(1)).toPromise();它奏效了。谢谢!!!!有没有理由让它在 stackblitz 上运行而不是在本地运行?
  • 不确定,可能是版本问题。如果时间允许,我会尝试一下。如果有帮助的话。感谢您接受答案(将修改为包括管道)。
  • 有趣的是,我使用了 toPromise();在同一个项目中的其他 observable 上没有任何问题。
  • pipe(take(1)) 是我需要的。这为我节省了大量时间。
猜你喜欢
  • 1970-01-01
  • 2018-07-09
  • 2016-10-06
  • 1970-01-01
  • 2018-09-02
  • 2018-04-28
  • 1970-01-01
  • 2023-03-12
  • 1970-01-01
相关资源
最近更新 更多