js代码执行顺序是自上而下的。同步代码就正常顺序执行,异步代码会先存在队列里,在同步代码执行完成后在执行。
同步代码是没有优先级的区别,他们都是按顺序执行的,但是异步代码是分微任务和宏任务的
异步执行有优先级,先执行微任务(microtask队列),再执行宏任务(macrotask队列),同级别按顺序执行async
微任务(例): `process.nextTick` ,`promise` ,`MutationObserver`函数
宏任务(例):`script` , `setTimeout` ,`setInterval` ,`setImmediate` ,`I/O` ,`UI rendering`spa
例:
console.log(1);
Promise.resolve().then(()=>{
console.log(2);
Promise.resolve().then(()=>{
console.log(3)
Promise.resolve().then(()=>{
console.log(4);
});
})
})
console.log(8);
setTimeout(()=>{
console.log(5);
},0)
Promise.resolve().then(()=>{
console.log(6);
})
setTimeout(()=>{
console.log(7);
})
//输出结果是:1 8 2 6 3 4 5 7
//先执行所有的同步任务,再执行异步任务中的微任务,最后执行异步任务中的宏任务
async,await:是建立在 promise 的基础上的 ,一般成对出现。当一个函数前加了async,就表示这个函数里很大可能有异步函数,而在第一个await表达式出现之前,异步函数内部的代码都是按照同步方式执行的。await所在表达式是同步的。
await会阻塞其所在表达式中后续表达式的执行(在和await在同一函数内但在await后面的代码会被阻塞,形成类似微任务的存在)
例:
async function fn1(){
console.log(1)
await fn2()
console.log(3)
}
async function fn2(){
console.log('fn(2)')
}
fn1()
console.log(2)
//结果:1 fn2() 2 3
for循环+异步(接口调用)
async getdatelist() {
for (let i = 0; i < 4; i++) {
let date = {
type: 0,
name: '',
}
await this.$api.getdataApifun(params).then(res => {
console.log(res)
this.datelist.push(res.data.list)
}).catch(err => {
console.log(err)
})
}
console.log(this.datelist)
}