JavaScript 中的 async/await 是屬於比較新的知識,在ES7中被提案在列,然而咱們強大的babel粑粑已經對它進行列支持!vue
若是開發中使用了babel轉碼,那麼就放心大膽的用吧。promise
在vue中使用的例子請到最下面babel
做爲新時代的玩意兒,若是對promise不瞭解,須要先補習一下 Promise 相關的知識。異步
async 顧名思義,就是異步的意思, 看上去是一個異步標識,就是告訴咱們這個函數中有異步執行的代碼。async
像這樣 標識:函數
async function getData() { // ...... }
這就是說getData函數裏面有異步的東西,那麼異步的東西是什麼呢? 其實就是個Promise,this
就算你不寫, 直接return 個任何, 它都會封裝一下,讓你return的東西出如今一個Promise的resolve() ,就是這麼剛!spa
例子: 這裏 getData_1 和 getData_2 當你使用await 執行他們時, 結果是同樣的,獲得的也是同樣的, 都返回一個 Promise對象, 而 getData_1 則是async封裝的Promise對象並將 '100' 放到resolve() 的參數中:resolve('100')。code
function getData_1 () { return '100' } function getData_2 () { return new Promise((resolve, reject) => { resolve('100') }) }
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 } } }