前端 -> JavaScript Promise更加优雅地书写复杂的异步任务,异步函数(async function)

详细查看菜鸟教程

构造 Promise

现在我们新建一个 Promise 对象:

//resolve 和 reject 都是函数,其中调用 resolve 代表一切正常
//reject 是出现异常时所调用的:
new Promise(function (resolve, reject) {
    // 要做的事情...
});
//new一个 promise
new Promise(function (resolve, reject) {
//设置超时执行,时间为1000ms
    setTimeout(function () {
    //打印
        console.log("First");
        //表示执行正常,没有异常,且无参表示,没有数据需要返回给下一个then
        resolve();
    }, 1000);
    //下一个then函数,无参,如果有参数,就是前面resolve传过来的
}).then(function () {
//重复操作
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Second");
            resolve();
        }, 4000);
    });
}).then(function () {
    setTimeout(function () {
        console.log("Third");
    }, 3000);
});

例子:

new Promise(function (resolve, reject) {
    var a = 0;
    var b = 1;
    //有异常,调用; reject
    if (b == 0) reject("Diveide zero");
    else resolve(a / b);
    //上面resolve传过来的value
}).then(function (value) {
    console.log("a / b = " + value);
    //接受异常的字符串"Diveide zero",这没有出现异常,不用调用reject方法
}).catch(function (err) {
    console.log(err);
}).finally(function () {
    console.log("End");
});

结果:

a / b = 0
End
new Promise(function (resolve, reject) {
    console.log(1111);
    resolve(2222);
}).then(function (value) {
    console.log(value);
    return 3333;
}).then(function (value) {
    console.log(value);
    throw "An error";
}).catch(function (err) {
    console.log(err);
});

执行结果:

1111
2222
3333
An error

异步函数(async function)

在 Promise 中我们编写过一个 Promise 函数:

实例
function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}

然后用不同的时间间隔输出了三行文本:

实例
print(1000, "First").then(function () {
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});

我们可以将这段代码变得更好看:

实例
async function asyncFunc() {
    await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();
哈!这岂不是将异步操作变得像同步操作一样容易了吗!

这次的回答是肯定的,异步函数 async function 中可以使用 await 指令
await 指令后必须跟着一个 Promise,异步函数会在这个 Promise 运行中暂停,直到其运行结束再继续运行。

异步函数实际上原理与 Promise 原生 API 的机制是一模一样的,只不过更便于程序员阅读。

处理异常的机制将用 try-catch 块实现

实例
async function asyncFunc() {
    try {
        await new Promise(function (resolve, reject) {
            throw "Some error"; // 或者 reject("Some error")
        });
    } catch (err) {
        console.log(err);
        // 会输出 Some error
    }
}
asyncFunc();

如果 Promise 有一个正常的返回值,await 语句也会返回它:

实例
async function asyncFunc() {
    let value = await new Promise(
        function (resolve, reject) {
            resolve("Return value");
        }
    );
    console.log(value);
}
asyncFunc();


程序会输出:

Return value
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值