快捷導(dǎo)航

一文教會(huì)你vue中使用async和await

更新時(shí)間：2022年10月19日 16:18:30 作者：前端小白在前進(jìn)

async和await作為異步函數(shù),語(yǔ)法很簡(jiǎn)單,就是在函數(shù)前面加上async 關(guān)鍵字,來(lái)表示它是異步的,下面這篇文章主要給大家介紹了如何通過(guò)一文教會(huì)你vue中使用async和await的相關(guān)資料,需要的朋友可以參考下

引言

在我們進(jìn)行實(shí)際開發(fā)中會(huì)遇到異步請(qǐng)求的問(wèn)題,這時(shí)候我們的異步請(qǐng)求的存在就非常的具備合理性了！接下來(lái)將會(huì)講述異步編程終級(jí)解決方案async/await。

async和await定義

async 是異步的意思，而 await 是等待的意思，await 用于等待一個(gè)異步任務(wù)執(zhí)行完成的結(jié)果。

1.async/await 是一種編寫異步代碼的新方法（以前是采用回調(diào)和 promise）。

2. async/await 是建立在 promise 的基礎(chǔ)上。

3. async/await 像 promise 一樣，也是非阻塞的。

4. async/await 讓異步代碼看起來(lái)、表現(xiàn)起來(lái)更像同步代碼。

使用場(chǎng)景

在實(shí)際開發(fā)中，相信大家都會(huì)遇到關(guān)于發(fā)送請(qǐng)求獲取數(shù)據(jù)的問(wèn)題，例如:如果你遇到了等第一個(gè)請(qǐng)求返回?cái)?shù)據(jù)完，再執(zhí)行第二個(gè)請(qǐng)求(可能第二個(gè)請(qǐng)求要傳的參數(shù)就是第一個(gè)請(qǐng)求接口返回的數(shù)據(jù))這個(gè)問(wèn)題，該怎么去處理呢？由于我們?cè)诓皇褂卯惒秸?qǐng)求的情況下，默認(rèn)發(fā)送多個(gè)請(qǐng)求是同步執(zhí)行的，就會(huì)導(dǎo)致我們也不知道到底是哪個(gè)接口優(yōu)先被執(zhí)行！??！

所以，我們必須要學(xué)會(huì)使用async/await!

實(shí)戰(zhàn)場(chǎng)景

話不多說(shuō)，直接上代碼:

const datas = async ()=> {
  await request.selectPies(Route.path.split('/')[3]).then(res=>{
  	states.ids = res.obj
	console.log(res)
  })
  //查詢發(fā)帖子用戶信息
  await request.selectUsers(states.ids).then(res=>{
    console.log(res.obj)
  })
}
datas()

這里是在vue3語(yǔ)法糖中使用異步請(qǐng)求，從代碼看出，第二個(gè)接口要使用第一個(gè)接口返回的數(shù)據(jù)，因此使用了異步請(qǐng)求。

補(bǔ)充：vue中async await請(qǐng)求處理

Promise.all() 用法示例：

const wait = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(`wait ${ms}ms`)
        resolve()
    }, ms)
})
const PA = Promise.all([wait(3000), wait(1000), wait(2000)])
// 依次打?。簑ait 1000ms wait 2000ms wait 3000ms

async-await 同時(shí)觸發(fā)多個(gè)異步操作示例

const wait = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(`wait ${ms}ms`)
        resolve()
    }, ms)
})
;(async () => {
    await Promise.all([wait(3000), wait(1000), wait(2000)])
    // 依次打?。簑ait 1000ms wait 2000ms wait 3000ms
})()

問(wèn)題：接口B需要接口A返回的數(shù)據(jù)，如果同時(shí)請(qǐng)求，控制不了返回速度，會(huì)出現(xiàn)B快于A，

實(shí)現(xiàn)：

async表示函數(shù)里有異步操作，

await表示緊跟在后面的表達(dá)式需要等待結(jié)果。

   methods: {
      fetchData: async function () {
        var that = this
        var code = Store.fetchYqm();
        let params = {
          inviteCode: code
        }
        const response = await http.post(params,api.getCode)
         var resJson = response.data;
      }
}