滨州网站建设有实力,网络精准营销推广,东莞seo广告宣传,雷州网站这里写目录标题 异步事件循环宏任务微任务1. 执行顺序2. 分类 Promise代码输出1. promise.then执行时机2. 宏任务微任务的多轮次3. .then .catch会返回新的promise4. 返回任意一个非 promise 的值都会被包裹成 promise 对象5. .then .catch 的值不能是promise本身6. 值透传7. .… 这里写目录标题 异步事件循环宏任务微任务1. 执行顺序2. 分类 Promise代码输出1. promise.then执行时机2. 宏任务微任务的多轮次3. .then .catch会返回新的promise4. 返回任意一个非 promise 的值都会被包裹成 promise 对象5. .then .catch 的值不能是promise本身6. 值透传7. .finally8. 捕获错误9. promise.all和promise.race Async await1. async搭配promise2. async中抛出错误 作用域、变量提升、闭包变量提升1. 全局变量赋值给了一个局部变量2. Function 和 var 都会变量提升3. function的变量提升作用域闭包例一例二 异步事件循环
宏任务微任务
1. 执行顺序
先执行微任务再执行宏任务注意宏任务微任务的多轮次,每执行完一次宏任务后都要检查有没有可执行的微任务
2. 分类
宏任务setTimeout、setInterval、I/O 操作如文件读取、网络请求等、UI 渲染 微任务Promise 的 then、catch、finally、process.nextTickMutationObserver
Promise代码输出
promise.then是微任务执行要等所有宏任务执行完并且promise内部状态发生变化状态改变后不会再更改
1. promise.then执行时机
script
const promise new Promise((resolve, reject) {console.log(1);setTimeout(() {console.log(timerStart);resolve(success);console.log(timerEnd);}, 0);console.log(2);
});
//由于Promise的状态此时还是pending所以promise.then先不执行
promise.then((res) {console.log(res);
});
console.log(4);
//最终输出1 2 4 timerStart timerEnd success
/script2. 宏任务微任务的多轮次
script
Promise.resolve().then(() {console.log(promise1);//进入第二轮宏任务const timer2 setTimeout(() {console.log(timer2)}, 0)
});
const timer1 setTimeout(() {console.log(timer1)//进入第二轮微任务先执行Promise.resolve().then(() {console.log(promise2)})
}, 0)
console.log(start);
//输出 start promise1 timer1 promise2 timer2/scriptconsole.log(1);setTimeout(function() {console.log(2);process.nextTick(function() {console.log(3);})new Promise(function(resolve) {console.log(4);resolve();}).then(function() {console.log(5)})
})
process.nextTick(function() {console.log(6);
})
new Promise(function(resolve) {console.log(7);resolve();
}).then(function() {console.log(8)
})setTimeout(function() {console.log(9);process.nextTick(function() {console.log(10);})new Promise(function(resolve) {console.log(11);resolve();}).then(function() {console.log(12)})
})
//输出1 7 6 8 2 4 3 5 9 11 10 123. .then .catch会返回新的promise
script
Promise.resolve(1).then(res {console.log(res);//return 2包装为resolve(2) 进入下一个.thenreturn 2;}).catch(err {return 3;}).then(res {console.log(res);});//输出 1 2
/script4. 返回任意一个非 promise 的值都会被包裹成 promise 对象
script
Promise.resolve().then(() {//这里会被.then捕获return new Error(error!!!)
}).then(res {console.log(then: , res)
}).catch(err {console.log(catch: , err)
})
//输出then: Error: error!!!
/script5. .then .catch 的值不能是promise本身
script
const promise Promise.resolve().then(() {return promise;
})
//进入死循环
promise.catch(console.err)
/script6. 值透传
script//.then.catch传入非函数会发生值透传
Promise.resolve(1).then(2).then(Promise.resolve(3)).then(console.log)//输出1
/script7. .finally
.finally()方法不管Promise对象最后的状态如何都会执行.finally()方法的回调函数不接受任何的参数也就是说你在.finally()函数中是无法知道Promise最终的状态是resolved还是rejected的.finally的返回值如果在没有抛出错误的情况下默认会是上一个Promise的返回值.finally 本质上是then方法的特例
8. 捕获错误
Promise.reject(err!!!)//在这里reject的错误直接被.then的err捕获而不是进入.catch.then((res) {console.log(success, res)}, (err) {console.log(error, err)}).catch(err {console.log(catch, err)})//输出error err!!!
//无论是thne还是catch中只要throw 抛出了错误就会被catch捕获
//如果没有throw出错误就被继续执行后面的then
Promise.resolve().then(() {console.log(1);throw Error;
}).then(() {console.log(2);
}).catch(() {console.log(3);throw Error;
}).then(() {console.log(4);
}).catch(() {console.log(5);
}).then(() {console.log(6);
});
//输出1 3 5 69. promise.all和promise.race
function runAsync (x) {const p new Promise(r setTimeout(() r(x, console.log(x)), 1000))return p
}
//输出 1 2 3 [12 3]
//所有输入的promise都成功解析后返回数组
Promise.all([runAsync(1), runAsync(2), runAsync(3)]).then(res console.log(res))
function runAsync (x) {const p new Promise(r setTimeout(() r(x, console.log(x)), 1000))return p
}
//输出 1 result:1 2 3
//promise.race只捕获第一个结果无论成功或失败且不再捕获
Promise.race([runAsync(1), runAsync(2), runAsync(3)]).then(res console.log(result: , res)).catch(err console.log(err))Async await
async单独使用为同步搭配await实现异步可以理解为await后的语句放入new Promise中下一行及之后放入promise.then中
1. async搭配promise
async function async1 () {console.log(async1 start);await new Promise(resolve {//new Promise立即执行但状态保持pending导致会暂停在这里console.log(promise1)//在这里执行resolve会使async1继续执行})console.log(async1 success);return async1 end
}
console.log(srcipt start)
async1().then(res console.log(res))
console.log(srcipt end)2. async中抛出错误
async function async1 () {await async2();console.log(async1);return async1 success
}
async function async2 () {return new Promise((resolve, reject) {console.log(async2)//如果async函数中抛出了错误就会终止错误结果不会继续向下执行//如果想让其执行可以用catch捕获错误reject(error)})
}
async1().then(res console.log(res))作用域、变量提升、闭包
变量提升
1. 全局变量赋值给了一个局部变量
var x y 1; 实际上这里是从右往左执行的首先执行y 1, 因为y没有使用var声明所以它是一个全局变量然后第二步是将y赋值给x讲一个全局变量赋值给了一个局部变量最终x是一个局部变量y是一个全局变量所以打印x是报错
(function(){var x y 1;
})();
var z;console.log(y); // 1
console.log(z); // undefined
console.log(x); // Uncaught ReferenceError: x is not defined2. Function 和 var 都会变量提升
var friendName World;
(function() {
//相当于这里多了一行var friendNameif (typeof friendName undefined) {var friendName Jack;console.log(Goodbye friendName);} else {console.log(Hello friendName);}
})();
3. function的变量提升
function fn1(){console.log(fn1)
}
var fn2fn1()
fn2()fn2 function() {console.log(fn2)
}fn2()
//输出
//fn1
//Uncaught TypeError: fn2 is not a function
//fn2作用域
function a() {var temp 10;function b() {console.log(temp); // 10}b();
}
a();function a() {var temp 10;b();
}
function b() {console.log(temp); // 报错 Uncaught ReferenceError: temp is not defined
}
a();闭包
例一
function fun(n, o) {
//当传入实参多于形参时剩下的形参为undefinedconsole.log(o)return {fun: function(m){//返回对象再次进入fun,打印o//当作用域中没有n时向上作用域寻找return fun(m, n);}};
}
//输出
//undefined 0 0 0
//undefined 0 1 2
//undefined 0 1 1
var a fun(0); a.fun(1); a.fun(2); a.fun(3);
var b fun(0).fun(1).fun(2).fun(3);
var c fun(0).fun(1); c.fun(2); c.fun(3);例二
解释 由于在匿名函数中又重新定义了函数g就覆盖了外部定义的变量g所以这里调用的是内部函数 g 方法返回为 true当一个布尔值参与到条件运算的时候true 会被看作 1, 而 false 会被看作 0。现在条件变成了 [] 0 的问题了当一个对象参与条件比较的时候它会被求值求值的结果是数组成为一个字符串[] 的结果就是 ‘’ 而 ‘’ 会被当作 0 所以条件成立
f function() {return true;};
g function() {return false;};
(function() { if (g() [] ![]) { f function f() {return false;}; function g() {return true;} }
})();
console.log(f());
