一小池勺❤️❤️❤️ ❤️❤️❤️❤️胸有惊雷而面如平湖者，可拜上将军也。
async 和 await
异步编程谁来管？交给 Promise 来就好了
需求：一个定时器完成，再执行下一个定时器，请使用 Promise 方式来设计实现
如下两个定时器的设置，在控制台是等待 1s 后，同时输出 1 2
setTimeout(()=> { console.loog(1); }, 1000) setTimeout(()=> { console.log(2); }, 1000)
如下两个定时器的设置，可以完成需要，但是回调多了，就是回调地狱
<script> setTimeout(() => { console.log(1); setTimeout(() => { console.log(2); }, 1000) }, 1000) </script>
我们使用 Promise 来管理
let promise1 = new Promise(resolve => { setTimeout(() => { resolve(1); }, 1000) }) promise1.then(res => { console.log(res); return new Promise(resolve => { setTimeout(() => { resolve(2) },1000) }) }).then(res => { console.log(res) })
但是能不能可以更加简洁使用 Promise 呢？
语法糖：async 与 await
简化 Promise 写法
async
async 修饰一个函数，控制其返回的结果是一个 Promies 实例，可以理解为将同步函数（或异步函数），
修饰成 Promise 管理的异步函数。
<script> async function func() { return Promise.resolve(10) } func().then(res => { console.log(res); }) </script>
await
await 可以理解为把一个
异步操作修饰为同步的效果（但是它还是异步）
<script> async function func() { let res; // => await 会等待当前的 Promise 实例返回一个正确的实例后再往下走 res = await new Promise(resolve => { setTimeout(() => { resolve(1) }, 1000) }) console.log(res); res = await new Promise(resolve => { setTimeout(() => { resolve(2) }, 1000) }) console.log(res); } func() </script>
对如下功能做修改
let promise1 = new Promise(resolve => { asyncCall(data => { resolve(1) }) }) let promise2 = new Promise(resolve => { otherAsyncCall(data => { resolve(2) }) }) promise1.then(() => { return promise2; }).then(() => { })
使用 acync await
let promise1 = new Promise(resolve => { asyncCall(data => { resolve(1) }) }) let promise2 = new Promise(resolve => { otherAsyncCall(data => { resolve(2) }) }) async function func() { await promise1; await promise2; }
当 axios 请求碰见 acync await
async function func() { let userInfo = await axios.get('/user/info') let score = await axios.get('/user/score', { param: { id: userInfo.id } }) console.log(score) }
以上便是ES7系列新增加的关于对Promise的一种新的写法和处理方式，能够在 Promise then链解决回调地狱的基础之上，再简化结果。
