1. 前言
首先说明
async/await语法 属于ES7,不过到现在就算是es6也还算是新技术吧,技术迭代比较慢
2. 是什么 what
1.
async/await语法 通常结合promise使用2.也就是说也是用同步的方式来写异步代码
3.
async是异步的意思 用来声明一个function是异步的4.
await是 async wait 异步等待 ,就是等待一个异步函数执行完成
- 规定
await只能出现在async函数中
3. async基础
3.1 demo
async function testAsy() { return "hello asy" } const result = testAsy() console.log("result:",result);
3.2 结果
3.3 分析
- 打印的结果并不是 return的字符串
- 返回的是个
promise,所以我们需要通过then来脱壳取值
3.4 取值
async function testAsy() { return "hello asy" } testAsy().then(res=>{ console.log("Res:",res); }) console.log("result后面,但是先执行");
3.5结果
3.6 分析
async修饰的函数 是异步函数async内部给函数包了一层Promise.resolve()
4. reject实现
既然有
resolve那肯定也有reject
4.1 代码
async function testAsy(flag) { if(flag){ return "hello asy" }else{ throw '抛出异常' } } console.log(testAsy(true));//Promise.resolve() console.log(testAsy(false));//Promise.reject()
4.2 结果
5. catch
5.1 代码
async function testAsy(flag) { if(flag){ return "hello asy" }else{ throw '抛出异常' } } testAsy(false).then(res=>{ console.log("Res:",res); }).catch(err=>{ console.log("捕获错误:",err); })
5.2 结果
还是通过 promise的 catch来进行错误捕获
6. await catch
1.async wait 异步等待 ,等待什么呢
- 后面可以根任何表达式
6.1 代码
function testWait() { return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve("测试wait") },1000) }) } async function test() { const r1 = await testAsy(true) console.log("结果 wait:",r1); const r2 = await testWait() console.log("结果 wait:",r2); } test()
6.2 分析
1.testWait()本身就是返回的promise,异步的,所以不需要加async
2.使用async/await语法对比
3.
await放置在Promise调用之前，await强制等待后面代码执行，直到Promise对象resolve，得到resolve的值作为await表达式的运算结果4.
await只能在async函数内部使用,用在普通函数里就会报错
6.3 then处理
await直接脱掉了一层then的壳 比较方便
6.4 catch
function testWait() { return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve("测试wait") },1000) }) } async function test() { const r1 = await testAsy(true) console.log("结果 wait:",r1); const r2 = await testWait() console.log("结果 wait:",r2); try{ let res3 = await testAsy(false) console.log("结果-3:",res3) } catch(error){ console.log("-------",error) } } test()
其实就是结合 try{}catch{}来搞
7.react 使用
async componentDidMount(){ try{ let res1 = await axios.get("/v1/use?type=1") console.log("结果:",res1) } catch(error){ console.log("-------",error) }
8. vue3 使用
async created() { this.characters = (await getList()).data }
9. 扩展下规范的几个阶段
1.编辑草案 Editor's Draft (ED)
2.工作草案 Working Draft (WD)
3.过渡－最后通告工作草案 Transition – Last Call Working Draft (LCWD)
4.候选推荐标准 Candidate Recommendation (CR)
5.过渡－建议推荐标准 Transition – Proposed 6.Recommendations (PR)
7.推荐标准 Recommendation (REC)
