vue中如何使用async和await

本文小編為大家詳細介紹“vue中如何使用async和await”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue中如何使用async和await”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

async和await定義

async 是異步的意思，而 await 是等待的意思，await 用于等待一個異步任務執行完成的結果。

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

2. async/await 是建立在 promise 的基礎上。

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

4. async/await 讓異步代碼看起來、表現起來更像同步代碼。

使用場景

在實際開發中，相信大家都會遇到關于發送請求獲取數據的問題，例如:如果你遇到了等第一個請求返回數據完，再執行第二個請求(可能第二個請求要傳的參數就是第一個請求接口返回的數據)這個問題，該怎么去處理呢？由于我們在不使用異步請求的情況下，默認發送多個請求是同步執行的，就會導致我們也不知道到底是哪個接口優先被執行！！！

所以，我們必須要學會使用async/await!

實戰場景

話不多說，直接上代碼:

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

這里是在vue3語法糖中使用異步請求，從代碼看出，第二個接口要使用第一個接口返回的數據，因此使用了異步請求。

補充：vue中async await請求處理

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)])
// 依次打印：wait 1000ms wait 2000ms wait 3000ms

async-await 同時觸發多個異步操作示例

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)])
    // 依次打印：wait 1000ms wait 2000ms wait 3000ms
})()

問題：接口B需要接口A返回的數據，如果同時請求，控制不了返回速度，會出現B快于A，

實現：

async表示函數里有異步操作，

await表示緊跟在后面的表達式需要等待結果。

   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;
      }
}

讀到這里，這篇“vue中如何使用async和await”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。