宏任务微任务，同步异步，JS执行机制：

网上同质化太厉害 自己写的笔记 都是手敲的还不给过原创 OTZ
当作学习笔记自用好了

宏任务微任务，同步异步，JS执行机制：

因为javascript是一门单线程语言，是按照语句出现的顺序执行的
宏任务和微任务
JS执行机制

• 同步的进入主线程，异步的进入Event Table并注册函数。
• 事情完成例如定时3秒，Event Table会将这个函数移入Event Queue
• Event Queue分为宏任务Queue与微任务Queue
• 主线程任务执行完，Event Queue读取对应的函数，进入主线程执行
• 上述过程会不断重复，也就是常说的Event Loop(事件循环)。

来自掘金，作者：ssssyoki

除了广义上的同步异步任务还可以分为宏任务\微任务
宏任务：包括整体代码script，setTimeout，setInterval，所有的网络请求
微任务：Promise，process.nextTick。
但遇到异步操作时会分别放在宏任务queue队列中与微任务queue队列中。
等宏整体JS执行完后，先从微任务queue拿回调，微任务queue空了在执行宏任务queue
案例理解：

setTimeout(function() {
    console.log('setTimeout');
})

new Promise(function(resolve) {
    console.log('promise');
}).then(function() {
    console.log('then');
})

console.log('console');
//先将整体代码作为宏任务执行，同步直接执行，异步注册Event queue
//setTimeout异步注册于宏任务队列  .then注册于微任务队列
//宏任务(整体代码)完成->微任务队列->宏任务如此循环

异步：

异步：遇到后先执行非异步操作 最后返回来执行异步
Promise对象 与 async关键字声明的函数 都是异步操作的容器 内部会包含异步操作，但不影响内部同步操作的执行
promise（.resolve .reject .then .catch）
async（await throw .then .catch）
async 是建立在 promise机制之上的
理解JS异步操作
javascript是单线程，依次执行一个任务，要想让任务能够顺利进行，我们需要排队，异步就是将任务放入异步队列，在主线程执行结束之后再去执行

使用async 理解promise/异步/回调

Javascript是一个单线程的编程语言所以会涉及到大量的异步函数
煮饭事件就是一个异步事件 等着饭熟不做其他事就是阻塞
电饭煲通知就是一个回调函数，得到通知再回去处理煮饭这个事件
在饭还没熟的过程中，我们就能够去做其它事情了。这就是所谓的异步机制

常见的异步任务主要有3类：

• 网络请求（Ajax）
• 事件触发（onclick | onchange etc.）
• 定时函数（setTimeout | setInterval）

回调地狱： 异步任务相互依赖，层层嵌套，每层都有大量代码，可读性极差

Promise对象

异步操作的容器
封装异步操作为promise对象，可new/.resolve()/.reject()

let z = new Promise((resolve, reject) => {
      setTimeout(() => {//将异步函数封装为Promise对象
        resolve(event)//也可通过resolve()/reject()直接设置返回的promise对象状态
      }, 1000)
    })               
z    //等待态  Promise {<pending>}

let a = Promise.resolve(123)//等同于 let a = new Promise((resolve,reject)=>{resolve(123)})
a.then((result) => {
    console.log(result)   // 成功态  Promise {<fulfilled>: 123}
})

let b = Promise.reject('123')//等同于let b = new Promise((resolve,reject)=>{reject(123)})
b.catch((result) => {
    console.log(result)   // 123 失败态
})

被封装的函数有了三种状态，将异步执行，可.catch捕捉异常态，可.then链式调用(解决异步函数的回调地狱)
Promise.resolve() 快速获取一个成功状态的promise对象
Promise.reject() 快速获取一个拒绝状态的promise对象
三种状态 ：pending(等待态)，resolved/fulfilled(成功态)，rejected(失败态)
可以对异步函数来一个Promise封装方便链式调用
.then下一步的操作 返回一个promise对象，可以继续用then方法调用，再次调用所获取的参数是上个then方法return的内容
.catch 捕捉异常

function getNumber() {
    var p = new Promise(function(resolve, reject) {
        setTimeout(function(){
            var num = Math.ceil(Math.random()*10);
            if(num<5) {
                resolve(num)
            } else {
                reject('数字太大了')
            }
        }, 2000)
    });
    return p;
}
getNumber()
        .then(function(data) {
            console.log('resolve');
            console.log(data);
        })
        .catch(function(reason) {
            console.log('reject');
            console.log(reason); 
        })

async(异步) await关键字:

await案例
promise和async区别的案例 ：用await来避免异步嵌套
异步操作的容器
async、await、promise
基于promise，与promise协同工作，放在函数关键字前修饰，表示函数是一个异步函数，不需要书写繁杂的Promise
·确保了函数返回一个promise
·允许在这其中使用await
·内部可使用await、throw
·函数可调用.then、.catch

let a = Promise.resolve(123)
a.then((result) => {
    console.log(result)
})

//对比Promise对象的写法  无需手动封装  函数写在async中直接返回Promise对象

async function a(){//声明异步函数
      "123";//返回的都是promise对象  
      //异常通过throw抛出：throw "123"
      //await写在async里面  后面可以放任何表达式，更多是promise对象表达式   用来等待 Promise 对象的状态被 resolved  但当await的是正常的表达式则立即执行。最好把await命令放在try...catch代码块中。
}

//同样使用.then.catch 调用者变为了使用async修饰的函数  本质也是promise对象 

console.log(a());//调用时会先返回promise对象  这里输出promise对象
a().then((result)=>{
    console.log(result);//底层还是promise，可以使用then方法添加回调函数。
}).catch((result)=>{
    console.log(result);//也可以捕获promise异常态
});

练习：
ES6 Promise实战练习题

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('request done! '+ second + Math.random());
        }, second);
    })
}
async function bugDemo() {
    console.log(await sleep(2000));
    console.log(await sleep(3000));
    console.log(await sleep(1000));
    console.log('clear the loading~');
}
bugDemo();//Promise {<pending>}__proto__: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: undefined
		 //VM512:9 request done! 20000.65040025283329
		 //VM512:10 request done! 30000.8083610725410029
		 //VM512:11 request done! 10000.006901671040587809
		 //VM512:12 clear the loading~