文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

一文教会你vue中使用async和await

2022-11-13 18:35

关注

引言

在我们进行实际开发中会遇到异步请求的问题,这时候我们的异步请求的存在就非常的具备合理性了!接下来将会讲述异步编程终级解决方案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的文章就介绍到这了,更多相关vue使用async和await内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯