Question

我正在使用webpack和node构建自己的borwserside javascript sdk。

我有一个简单的身份验证功能，该功能是在sdk中创建的。它是一个简单的回调函数，该函数查询api并以回调形式返回结果是否成功。

sdk.js

  async authenticate(callback) {

        try {

            this.account = await this.repo.authenticate(this.product, this.origin);

            if (this.account.success === false) {
                return callback({
                    "success": false,
                    "response": "Failed To Authenticate"
                });
            }

            return callback({
                "success": true,
                "response": this.account
            });


        } catch (e) {

            return callback({
                "success": false,
                "response": e
            });

        }

    }

现在在我的浏览器中，我有一个索引文件。将实例化对象并调用此函数。

index.html

<script>

hsp = new HSP();

// function called on button click
async function done() {

    // Works
    hsp.authenticate((res) => {
        console.log(res);
     });

     // DOES NOT WORK
    try {
        const auth = await hsp.authenticate();

        console.log(auth);

    } catch (er) {
        console.log(er);
    }

}

</script>

在上述示例中的index.html中，authenticate的回调版本有效，但try catch块中的authenticate的await / async版本不起作用。为什么以及如何使它起作用。

我希望这两个选项都起作用。

我收到以下错误。其中引用了catch块和console.log（er）。

TypeError：t不是函数在t.value（index.js：41）

Answer 1

您正在混合两种方法callbacks和promises。使用promises功能更强大，并且异步函数利用了promises，它们使您可以编写基于promise的代码，就好像它们是同步的一样，但是不会阻塞主线程。

Async return values

异步函数总是返回一个承诺，无论   您是否使用等待。该承诺可以通过任何异步方式解决   函数返回或拒绝异步函数抛出的异常。

然后在异步函数之外使用您的回调，否则就可以捕获。

sdk.js

async authenticate() {

        try {

            this.account = await this.repo.authenticate(this.product, this.origin);

            if (this.account.success === false) {
                return {
                    "success": false,
                    "response": "Failed To Authenticate"
                };
            }

            return {
                "success": true,
                "response": this.account
            };


        } catch (e) {

            return {
                "success": false,
                "response": e
            };

        }

    }

index.html

<script>

hsp = new HSP();

// function called on button click
async function done() {

    // Works (Your callback here in then method)
    hsp.authenticate().then((res) => {
        console.log(res);
     }).cath( err => console.log(er));

     // It Will WORK (Make use of your callback outside of the async function)
    try {
        const auth = await hsp.authenticate();

        console.log(auth);

    } catch (er) {
        console.log(er);
    }

}

</script>

我希望这会有所帮助。

Javascript获得自定义异步并等待函数工作

1 个答案: