JavaScript_异步编程

Posted 2021-06-30 akyna-zh

1. 回调函数：最基本的异步

setTimeout(function () {
    document.getElementById("demo").innerhtml="RUNOOB!";
}, 3000);

setTimeout 会在子线程中等待 3 秒，在 setTimeout 函数执行之后主线程并没有停止。

2. Promise构造函数：更良好的异步风格

Promise()用于创建一个新的 Promise 对象。该构造函数主要用于包装还没有添加 promise 支持的函数。

Promise 构造函数只有一个参数，是一个函数，这个函数在构造之后会直接被异步运行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。

new Promise(function (resolve, reject) {
    console.log("Run");
});

resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，reject 是出现异常时所调用的。

3. then catch finally

Promise 类有 .then() .catch() 和 .finally() 三个方法，这三个方法的参数都是一个函数。

new Promise(function (resolve, reject) {
    var a = 0;
    var b = 1;
    if (b == 0) reject("Divide zero");
    else resolve(a / b);
}).then(function (value) {
    console.log("a / b = " + value);
}).catch(function (err) {
    console.log(err);
}).finally(function () {
    console.log("End");
});

执行结果
a / b = 0
End

说明：

.then() 
可以将参数中的函数添加到当前 **Promise 的正常执行序列**

.catch()
 设定 **Promise 的异常处理序列**
 
 .finally() 
 在 Promise 执行的**最后一定会执行的序列**

.then() 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列。

return不能终止then块，只能通过throw跳转至catch来进行终止。

4.各函数间传值

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

resolve() 中可以放置一个参数用于向下一个 then 传递一个值。

then 中的函数也可以返回一个值传递给下一个then，但是，如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作。

reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。

注意以下两点：

resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列；

resolve 和 reject 并不能够使起始函数停止运行，别忘了 return。

5. 由嵌套式异步到Promise异步

嵌套式异步

setTimeout(function () {
    console.log("First");
    setTimeout(function () {
        console.log("Second");
        setTimeout(function () {
            console.log("Third");
        }, 3000);
    }, 4000);
}, 1000);

控制台运行结果

First 
Second
Third 

使用Promise构造函数变嵌套为顺序

new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log("First");
        resolve();
    }, 1000);
}).then(function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Second");
            resolve();
        }, 4000);
    });
}).then(function () {
    setTimeout(function () {
        console.log("Third");
    }, 3000);
});

利用Promise定义函数实现异步

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

具体实现形式：

1.普通形式

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

2.async形式

async作为一个关键字放在函数的前面，表示该函数是一个异步函数，意味着该函数的执行不会阻塞后面代码的执行

async function asyncFunc() {
    await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();

参考：https://www.runoob.com/js/js-promise.html