同步和异步(promise,async,await)

(promise,async,await)，宏任务、微任务

1、同步和异步

同步是指代码在一帧内执行；异步是指需要等待某个内容完成后才执行。

console.log(\"aaa\");for(var i=0;i<1000000000;i++){}console.log(\"bbb\");//同步

同步 停止等待运行结束，继续后续的运行。

console.log(\"aa\");setTimeout(function(){console.log(\"bb\");},5000)console.log(\"cc\"); //异步

异步操作就是需要等待一个内容完成后继续执行后面的内容，但是不能将后面的内容写在等待函数外，否则就会同时执行两个。

常见异步的事件：

load事件、setTimeout、setInteral、requestAnimationFrame()

如果大量使用onload以及onclick等代码容易造成回调地狱。此时就可以使用promise。

2、promise

处理异步模式，将异步模式摊开来处理。

var p=new Promise(function(resolve,reject){var img=new Image();img.src=\"./img/17.jpg\";img.onload=function(){resolve(img);}img.onerror=function(){reject(img.src+\"地址错误\");}})p.then(function(a){console.log(a);//执行resolve执行这个函数},function(b){console.log(b);//执行reject执行这个函数})

promise中的函数有两个参数，两个参数都是函数，如上述代码，一个为resolve当加载成功时调用，一个为reject当加载失败时调用。

Promise中有一个then的方法，它里面也有两个参数，第一个参数是执行resolve执行这个函数，第二个参数是执行reject这个函数。

p.then(function(a){console.log(a);//执行resolve执行这个函数}).catch(function(b){console.log(b);//执行reject执行这个函数})

也可以用then和catch写用法使用一样的，在then调用的函数中也可以使用函数return的返回值再次调用then

new Promise(function (resolve, reject) {var img1 = new Image();img1.src = \"./img/3-.jpg\";img1.onload = function () {resolve(img1);};}).then(function (img) {arr.push(img);return new Promise(function (resolve, reject) {var img2 = new Image();img2.src = \"./img/4-.jpg\";img2.onload = function () {resolve(img2);};});}).then(function (img) {arr.push(img);return new Promise(function (resolve, reject) {var img3 = new Image();img3.src = \"./img/5-.jpg\";img3.onload = function () {resolve(img3);};});});

Promise中提供了一个all的方法，他可以统一处理所有数组，并且返回一个列表。

Promise.all(arr).then(function(list){list.forEach(item=>{console.log(item.src);})

Promise中还有一个race方法

Promise.race(arr).then(function(img){console.log(img);//异步列表中谁最先完成就执行谁

Promise是否可以连续then

var p=new Promise(function(resolve,reject){resolve(1);});p.then(function(a){console.log(a);//  如果在这里没有return Promise对象就会继续执行下一个then中的内容// 下一个then中对应的执行对象仍然是当前promise对象});p.then(function(){})

代码执行的顺序

在promise对象方法中then和catch方法本身都是异步的

在promise对象中出来then和catch是异步之外，其他的都是同步的

console.log(\"a\");new Promise(function(resolve,reject){console.log(\"b\");resolve(1);console.log(\"c\");}).then(function(a){console.log(\"d\");}).then(function(){console.log(\"e\");})console.log(\"f\");//abcfde

promise中resolve和reject执行的干扰问题

只能执行一个，具有排他性

function getImage(src) {return new Promise(function (resolve, reject) {var img1 = new Image();img1.src = src;img1.onload = function () {resolve(img1);reject(img1.src+\"地址错误\");};});}

PromiseStatus 分为3个
pending 准备状态
resolved 执行resolve的状态
rejected 执行reject的状态

3、async和await

async函数执行后返回一个promise对象

await只能写在async函数中

await只能处理promise对象的异步等待

async函数中使用return返回的内容可以通过then来获取

function getImage(src) {return new Promise(function (resolve, reject) {var img1 = new Image();img1.src = src;img1.onload = function () {resolve(img1);};});}async function loadImages(){var arr=[];for(var i=3;i<30;i++){     await getImage(\"./img/\"+i+\"-.jpg\").then(function(img){arr.push(img);})

4、宏任务、微任务

异步和同步都是在完成任务列的内容

同步任务逐条进行

异步任务存在固定时间与非固定时间

setTimeout,setInterval,requestAnimationFrame,promise都是固定时间

加载文件和图片都是非固定时间

setTimeout setInterval是宏任务

Promise 微任务

宏任务指将当前的任务挪至到下一个任务列的最顶端执行

微任务指将当前任务的内容挪至到当前任务列的最低端执行

Promise.resolve().then(function(){setTimeout(function(){console.log(\"b\");},0)})setTimeout(function(){Promise.resolve().then(function(){console.log(\"a\");})},0)

宏任务里的微任务执行优先微任务里的宏任务；

微任务里的微任务比微任务优先

理解以下代码运行顺序

console.log(1);//1new Promise(function (res, rej) {console.log(2);//2res();}).then(function () {console.log(3);//5Promise.resolve().then(function () {console.log(5);//6setTimeout(function () {console.log(6);//15Promise.resolve().then(function () {console.log(7);//16});setTimeout(function () {console.log(8);//18}, 0);}, 0);});}).then(function () {console.log(4);//7});setTimeout(function () {console.log(9);//8new Promise(function (res) {res();console.log(10);//9}).then(function () {console.log(11);//10});});Promise.resolve().then(function () {setTimeout(function () {Promise.resolve().then(function () {console.log(12);//14});console.log(13);//13}, 0);});setTimeout(function () {setTimeout(function () {setTimeout(function () {Promise.resolve().then(function () {console.log(14);//20});console.log(15);//19}, 0);console.log(16);//17}, 0);console.log(17);//11}, 0);console.log(18);//3new Promise(function (res) {console.log(19);//4setTimeout(function () {console.log(20);//12}, 0);});