转载:https://www.cnblogs.com/hanguozhi/p/10406765.html
JavaScript 中的 async/await 是属于比较新的知识,在ES7中被提案在列,然而我们强大的babel粑粑已经对它进行列支持!
如果开发中使用了babel转码,那么就放心大胆的用吧。
在vue中使用的例子请到最下面
1. 何为 async
作为新时代的玩意儿,如果对promise不了解,需要先补习一下 Promise 相关的知识。
async 顾名思义,就是异步的意思, 看上去是一个异步标识,就是告诉我们这个函数中有异步执行的代码。
像这样 标识:
async function getData() { // ...... }
这就是说getData函数里面有异步的东西,那么异步的东西是什么呢? 其实就是个Promise,
就算你不写, 直接return 个任何, 它都会封装一下,让你return的东西出现在一个Promise的resolve() ,就是这么刚!
例子: 这里 getData_1 和 getData_2 当你使用await 执行他们时, 结果是一样的,得到的也是一样的, 都返回一个 Promise对象, 而 getData_1 则是async封装的Promise对象并将 '100' 放到resolve() 的参数中:resolve('100')。
function getData_1 () { return '100' } function getData_2 () { return new Promise((resolve, reject) => { resolve('100') }) }
2. 何为 await
await 就是等待 async执行完,才会执行后面的东西, 等待的东西是异步的,它就会阻塞当前代码, 阻塞??!!
别担心, 它只能在async函数里使用, 虽然阻塞,但是是异步的。
来个例子:
async function getData_1 () { return '100' } function getData_2 () { return new Promise((resolve, reject) => { setTimeout(() => { resolve('200') }, 2000) }) } async function run () { const data_1 = await getData_1(); console.log(data_1); const data_2 = await getData_2(); console.log(data_2); } run ();
getData_1 前面即使不声明async,使用await也是可以的, 因为await 啥都能等!
1.如果等到的是promise, 它就把promise的resolve的参数返回,
2.如果等到的是普通东西,就直接返回这个东西。
就像上面的data_1 , 就算 getData_1 没有async 它的结果也一样的。
在run函数中, data_1 后的代码需要getData_1 执行完毕才会执行,
data_1 得出以后, data_2其实会2秒之后才会得出, 但是此时,它会等2秒,
直到data_2得出以后,才会执行后面的console
在vue中的例子:
export default { mounted () { this.run(); console.log('step2') }, methods: { queryData_1() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('queryData_1') }, 2000) }) }, queryData_2() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('queryData_2') }, 2000) }) }, queryData_3() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('queryData_3') }, 2000) }) }, async run () { const data_1 = await this.queryData_1(); console.log(data_1) // 2秒后打印 data_1 const data_2 = await this.queryData_2(); console.log(data_2) // 4秒后打印 data_2 const data_3 = await this.queryData_3(); console.log(data_3) // 6秒后打印 data_3 } } }