如何用dw做网站首页/网站流量排名

问题导向

async await是什么? 如何使用？promise如何处理错误？宏任务和微任务？

如果你都有了答案，可以忽略本文章，或去JS学习地图寻找更多答案

---

async await

是什么？

generator和promise的语法糖
async = new Promise
await = then函数的语法糖
try-catch = catch注意：
1.await必须写在aysnc函数中，但async函数中可以没有await
2.必须使用try catch 才能捕获失败的结果

---

async函数

async函数的返回值是一个promise对象，结果的状态根据函数返回的状态决定

async函数中：
1，返回的普通值/对象会封装成promise对象
2，await后可追加普通值，函数，async函数
3，await后如果是值，会封装成promise对象
4，await后如果是rejected态，会报错
5，await的下面，才是回调的异步代码，await和之前不是

//await 后是 promise对象
!(async () => {const p = Promise.resolve(300)  //返回promise对象const data = await p  //await 相当于thenconsole.log(data)  //300
})()
​
​
//await 后是 普通值
!(async () => {const p = Promise.resolve(300)const data = await 400  //await Promise.resolve(400)，相当于封装了console.log(data)  //400
})()
​
​
​
//await 后是 async函数
async function fn(){retrun Promise.resolve(200)
}
!(async () => {const p = Promise.resolve(300)const data = await fn()  //await Promise.resolve(200)，相当于封装了console.log(data)  //200
})()//try.catch
async function fn() {return Promise.reject('error')
}
!(async () => {try {const p = Promise.resolve(300)const data = await fn() //返回rejected态console.log(data)} catch (e) {console.log(e)  //error}
})()//async 的回调
async function foo(){consolo.log(2)await bar()  console.log(5)  //以下是异步代码，放到webapi中处理
}
​
async function bar(){consolo.log(3)
}
​
consolo.log(1)
foo()
consolo.log(4) //同步代码执行完毕

---

await表达式

await右侧表达式为promise，得到的结果就是promise成功的结果
await右侧表达式非promise，得到的结果就是它本身的值async function fn(){try{const value = await bar() //value：6const value = await Promise.resovle('成功的值') //value：'成功的值'await Promise.reject('失败的值')console.log(value)}catch(error){console.log(error) //'失败的值'}
}
function bar(){return 6
}

---

多种声明方式

//函数声明
async function get(name){return await ajax('xxx')
}//函数表达式
let get = async function(name){return await ajax('xxx')
}//对象
let hd = {async get(name){return await ajax('xxx')}
}//类的写法
class User{async get(name){return await ajax('xxx')}
}

for…of在异步中的使用

function mutl(num){return new Pormise(resovle => {settimeout(() => {resovle(num * num)},1000)})
}
​
let arr = [1,2,3]
​
一次执行完，1秒后打印全部结果
arr.forEach(async (i) => {const res = await mutl(i)consolo.log(res)  //1秒后全部打印出来
})
​
​
每隔1秒打印1个
！(async () => {for(let i of arr){const res = await muti(i)console.log(res)  }  
})()

---

错误处理

单独处理错误：写在then的第二个参数中
统一处理错误：写在catch中即使前面的异步操作出现异常，但是不希望影响后续操作
let p4 = () => Promise.reject('hello')
async function fn(){try{await p4()}catch(e){console.log(e)}return await 100 //代码执行完上面try中的错误，仍然会执行这句代码
}
fn().then(res => {console.log(res)
}) //hello 100

并行与串行

串行：先后执行先执行p1，再执行p2
let getP1 = () => {return new Promise((resolve) => {setTimeout(() => {resolve('p1')}, 2000)})
}
let getP2 = () => {return new Promise((resolve) => {setTimeout(() => {resolve('p2')}, 2000)})
}
let fn = async () => {let result1 = await getP1()console.log(result1)let result2 = await getP2()console.log(result2)
}
fn() //共等待4秒，p1，2秒，然后p2再执行2秒
​
​​
//并行：同时执行
let getP1 = () => {return new Promise((resolve) => {setTimeout(() => {resolve('p1')}, 2000)})
}
let getP2 = () => {return new Promise((resolve) => {setTimeout(() => {resolve('p2')}, 2000)})
}
let fn = async () => {let dop1 = getP1()let dop2 = getP2() //两个同时开始let result1 = await dop1let result2 = await dop2console.log(result1, result2)
}
fn() //共等待2秒

---

Promise队列

必须等上一个promise完成，才会执行下一个promise

let p1 = Promise.resolve('大神')
promise = p1.then((v) => {return new Promise((resolve) => {setTimeout(() => {console.log('1')resolve()}, 1000)})
})
promise   //返回的promise赋值.then((v) => {return new Promise((resolve) => {setTimeout(() => {console.log('2')}, 1000)})
}).then((v) => console.log('66')) //不会执行，因为上面没有resolve

---

宏队列和微队列

JS是单线程

JS是单线程的，所有的任务都在一个时间线上执行，也就是说任务的执行都是有先后的，
为了更有效率，JS会在执行主线程时(代码的从上往下执行)，
对程序中的所有事件任务划分同步和异步，同步的任务马上执行，
异步任务则放到任务队列中，在主线程执行完任务后，再从任务队列拿出任务执行。任务队列分为：宏队列和微队列，先执行微队列，再执行宏队列
​
//优先级划分
同步和异步：先执行同步，再执行异步
同步：同步按顺序，从上往下执行
异步：先执行微队列，再执行宏队列注意：
1.如果是同类型的，则按顺序上下执行
2.如果是定时器的，且都是宏任务的（内部没有微任务），
则按时间执行，如果时间相同，则按顺序上下执行
3.每次准备取出第一个宏任务执行前，微队列必须先执行完

执行顺序

//不同的任务，执行顺序也不同
setTimeout(() => {console.log('定时器') //输出顺序：5，异步宏任务
}，2000)
setTimeout(() => {console.log('定时器') //输出顺序：4，异步宏任务，时间短
}，1000)
Promise.resolve().then(value => {console.log('Promise') //输出顺序：3，异步微任务
})
console.log('xxx') //输出顺序：1，同步任务
for(let i = 0; i<10000; i++){console.log('2') //输出顺序：2，同步任务
}

new Promise((resolve,reject)=>{setTimeout(() => {console.log('定时器') //输出顺序：3异步宏任务resolve()}，10)console.log('promise')   输出顺序：1这是属于同步任务
}).then((value) => console.log('成功'))  //输出顺序：4这是属于异步微任务
console.log('log')  //输出顺序：2

setTimeout(() => {console.log('定时器') //输出顺序：2Promise.resolve().then(value => {console.log('Promise') //输出顺序：3})
}，1000)
setTimeout(() => {console.log('定时器') //输出顺序：4
}，1000)
Promise.resolve().then(value => {console.log('Promise') //输出顺序：1
})

学习更多

JS学习地图