一.try...catch
try {
正常的程序逻辑
} catch (err) {
当try分支中的代码出现异常,则执行catch分支的代码。
当try分支中有若干行代码,那么,一旦出现异常,后面的代码不执行。直接跳到catch分支。
}
try {
let n = 10;
let m = 0;
if (m == 0) {
// throw:抛出异常
throw new Error("亲,除数不能为0");
}
let d = n / m;
console.log("d", d);
} catch (err) {
console.log("err", err);//err Error: 亲,除数不能为0
}
二.async和await示例(用try...catch处理reject)
async function checkUser() {
// 在try分支里包裹着promise,那么一旦promise的reject被调用,就相当于出现了异常,那么,代码就会进入到catch分支。
try {
// 1、发送请求,获取数据:
let data = await ajax230102({
method: "post",
url: "http://118.178.238.19:3001/api/user/docheckphone1",
params: {
tel: document.getElementById("username1").value
}
});
// 2、根据数据,做对应的前端逻辑
if (data.code == "200") {
document.getElementById("msg").innerHTML = "亲,恭喜您,该用户名可以使用!";
} else if (data.code == "10005") {
document.getElementById("msg").innerHTML = "亲,不好意思,该用户名已被注册!";
} else {
document.getElementById("msg").innerHTML = "亲,你如果看到我,那么,很可怕";
}
}
catch (err) {//err:是reject的实参。
console.log("err",err);
}
}
window.onload = function () {
document.getElementById("username1").onblur = function () {
checkUser();
}
}
三.事件轮训机制
①示例:当只有宏任务:
console.log(1);
// 碰到setTimeout代码,会先把异步任务交给web api(计时,并把任务扔到任务队列)
setTimeout(function(){
console.log(2);
},1000)
// 碰到setTimeout代码,会先把异步任务交给web api(计时,并把任务扔到任务队列)
setTimeout(function(){
console.log(3);
},500)
console.log(4);
// 以上代码的执行顺序是:1,4,3,2
②示例:只有微任务:
// 1、
console.log(1);
(new Promise(function(resolve,reject){
console.log(2);//同步
resolve();//也是同步,但是调用then里的方法时,会把then里的方法扔给webapi,webapi再扔给微任务队列。
}))
.then(function(){
console.log(3);
})
console.log(4);
// 以上代码打印结果: 1,2,4,3
// 2、用Promise的语法糖
console.log(1);
Promise.resolve(2).then(function(n){
console.log(n);
})
// 等价于:
// new Promise(function(resolve){
// resolve(2)
// }).then(function(n){
// console.log(n);
// })
console.log(3);
// 以上代码打印结果: 1,3,2
③当宏任务碰到了微任务时
console.log(1);
setTimeout(function(){
console.log(2);
},0);
new Promise(function(resolve,reject){
console.log(3);
resolve();
})
.then(function(){
console.log(4);
});
console.log(5);
以上代码打印结果: 1,3,5,4,2
④当宏任务碰到了多个微任务时(当微任务里的所有任务都执行完毕时,才执行宏任务里的任务)
console.log(1);
setTimeout(function () {
console.log(2);
}, 0);
new Promise(function (resolve, reject) {
console.log(3);
resolve();
})
.then(function () {
console.log(4);
});
Promise.resolve(5).then(function (n) {
console.log(n);
})
console.log(6);
// 以上代码打印结果: 1,3,6,4,5,2
⑤当宏任务碰到了多个微任务时
宏任务队列和微任务队列执行思路和轮询机制不一样:
1、微任务队列执行时,会把所有的任务全部执行完毕,才会轮询宏任务
2、宏任务队列执行时:当执行完一个任务后,就会去轮询微任务队列。
setTimeout(function(){
console.log(2);
Promise.resolve(3).then(function(n){
console.log(n);
})
},0);
setTimeout(function(){
console.log(4);
},0);
new Promise(function(resolve,reject){
console.log(5);
resolve();
})
.then(function(){
console.log(6);
});
Promise.resolve(7).then(function(n){
console.log(n);
})
console.log(8);
//以上代码执行结果: 1、5、8、6、7、2、3、4
⑥ Promise,async,await,setTimeout
console.log(0); //主线程
setTimeout(function () {
console.log(1);//宏任务
}, 1000);
setTimeout(function () {
console.log(2);//宏任务
}, 0);
new Promise(function (resolve, reject) {
console.log(3);//主线程
resolve(); //微任务
}).then(() => {
console.log(4);//微任务,这个then里的回调代码就是resolve
});
async function async1() {
console.log(5); //同步,主线程
let temp = await async2(); //async2函数里有promise
console.log(temp);
console.log(6);
return "async1";
}
// 以上代码等价于:
// function async1(){
// return new Promise(function(resolve,reject){
// console.log(5); //同步,主线程
// async2().then(function(temp){
// console.log(temp);
// console.log(6);
// })
// resolve("async1");
// })
// }
async function async2() {
console.log(7); //同步
return "async2";
}
// 以上代码等价于:
// function async2(){
// return new Promise(function(resolve,reject){
// console.log(7); //同步
// resolve("async2");
// })
// }
async1()
console.log(8);//主线程,
// 以上代码的执行结果:0、3、5、7、8、4、 async2、6、2、1
四.cookie保存本地数据
function changeA(){
// a = 20;
// document.cookie = '键=值;expires=失效时间点(日期的GMT格式的字符串)';
let d = new Date();
d.setDate(14);
document.cookie = 'a=20;expires='+d.toGMTString();
}
function getA(){
console.log(document.cookie);
}