关于javascript:JS-异步事件及promise运行机制探究

3次阅读

共计 3051 个字符，预计需要花费 8 分钟才能阅读完成。

事件分为

1、同步事件
2、异步事件异步事件又被分为宏工作微工作

宏工作
1、新程序或子程序被间接执行，如 <script> 标签里的代码是程序被间接执行，控制台写代码也算程序间接执行。
2、事件的回调函数，如 onClick, onKeyup 的回调函数。
3、setTimeout() 和 setInterval()外面的回调函数。
其余: I/ O 操作，UI rendering，requestAnimationFrame，setImmediate
等

微工作
1、Promise .then() .catch() .finally()
2、以及 node.js 里的 process.nextTick()

其余：Object.observe 等

同一个工作，在一个浏览器中可能被归为宏工作在另一浏览器中可能被归为微工作。
有些浏览器会把 Promise.then()归为宏工作，支流的归类形式就是微工作。

宏工作和微工作的执行须要 Event Loop 事件循环
Event Loop 会一直寻找可执行的工作来执行，在执行完同步工作之后
1、首先会执行微工作队列的工作，把微工作队列的工作清空之后才会去执行宏工作（保障效率）
2、浏览器渲染（如果有）。
3、执行宏工作。
4、反复 1 2 3

晓得了下面的宏工作、微工作分类，再往下看实例
/*

setTimeout(() => {
console.log(“1”);
})
new Promise((resolve, reject) => {
console.log(“2”);
resolve();
console.log(“3”);
}).then(() => {
console.log(“4”);
}).then(() => {
console.log(“5”);
})
console.log(“6”);
*/
// 下面代码块的输入后果 2 3 6 4 5 1

/*
setTimeout(() => {
console.log(“1”);
})
new Promise((resolve, reject) => {
console.log(“2”);
// 没有明确的后果
console.log(“3”);
}).then(() => { // then() 不执行
console.log(“4”);
}).then(() => {
console.log(“5”);
})
console.log(“6”);
*/
// 下面代码块的输入后果 2 3 6 1

/*
setTimeout(() => {
console.log(“1”);
})
new Promise((resolve, reject) => {
console.log(“2”);
reject();
console.log(“3”);
}).catch(() => {
console.log(“4”)
}).then(() => {
console.log(“5”);
})
console.log(“6”);
*/
// 下面代码块的输入后果 2 3 6 4 5 1

/*
setTimeout(() => {
console.log(“1”);
})
new Promise((resolve, reject) => {
console.log(“2”);
reject();
console.log(“3”);
}).catch(() => {
console.log(“4”); // 进入这个 catch (因为 new Promise 的状态是 rejected)
}).catch(() => {
console.log(“5”); (然而这里没有 rejected 了，所以不会输入 5)
})
console.log(“6”);
*/
// 下面代码块的输入后果 2 3 6 4 1

/*
setTimeout(() => {
console.log(“1”);
})
new Promise((resolve, reject) => {
console.log(“2”);
reject();
console.log(“3”);
}).catch(() => {
console.log(“4”)
reject();
}).catch(() => {
console.log(“5”);
})
console.log(“6”);
*/
// 下面代码块的输入后果 2 3 6 4 5 1

/*
setTimeout(() => {
console.log(“1”);
})
new Promise((resolve, reject) => {
console.log(“2”);
reject();
console.log(“3”);
}).catch(() => {
console.log(“444”);
reject();
console.log(“4”)
}).catch((a) => {
console.log(“5”);
})
console.log(“6”);
*/
// 下面代码块的输入后果 2 3 6 444 5 1
// 不同于 new 的过程，实例中,reject()之后就不会往下执行

/*
setTimeout(() => {
console.log(“1”);
})
new Promise((resolve, reject) => {
console.log(“2”);
resolve();
console.log(“3”);
}).catch(() => {
console.log(“4”)
}).then(() => {
console.log(“5”);
})
console.log(“6”);
*/
// 下面代码块的输入后果 2 3 6 5 1
// 这部分的代码块，
// catch 和 then 都是 Promise 构造函数的间接前方，
// 不是.catch().then()这样的链式调用

/*
setTimeout(() => {
console.log(“1”);
})
new Promise((resolve, reject) => {
console.log(“2”);
reject();
console.log(“3”);
}).catch(() => {
console.log(“4”);
reject(“rejected”);
}).catch((a) => {
console.log(a); // 此处会报错
console.log(“5”);
})
console.log(“6”);
*/

// 下面代码块的输入后果 ↓
/*
2
3
6
4
ReferenceError: reject is not defined
5
1
*/
// 除非间接在 Promise 构造函数外部，否则不能调用 reject，因为它不在作用域内。

/*
setTimeout(() => {
console.log(“1”);
})
new Promise((resolve, reject) => {
console.log(“2”);
setTimeout(() => {resolve();}) // 宏工作
console.log(“3”);
}).then(() => {
console.log(“4”);
}).then(() => {
console.log(“5”);
})
console.log(“6”);
*/
// 下面代码块的输入后果 2 3 6 1 4 5

/*
setTimeout(() => {
console.log(“1”);
})
new Promise((resolve, reject) => {
console.log(“2”);
return;
console.log(“3”);
resolve();
}).then(() => {
console.log(“4”);
}).then(() => {
console.log(“5”);
})
console.log(“6”);
*/
// 下面代码块的输入后果 2 6 1
// return 完结了 promise 的构造函数