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”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。