有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue 同步(Vue 数据同步获取)实现方式

vue 炮渣日记 3周前 (11-16) 19次浏览 已收录 0个评论 扫描二维码

如果我们的业务逻辑需要请求多个数据,并且后一个请求依赖于前一个请求的结果,这时候我们更不能保证数据获取顺序,因此我们需要将异步请求改成同步,以保证业务逻辑的正确性。

async 与 await

async 意为

异步的,其放在我们所定义的function名前,如:

async getUser() {}

声明这个函数为一个异步执行的,也就是说 我们调用这个方法时,其返回就是一个Promise对象,显然axios的请求方法,就是通过这个关键字来实现异步的。他的好处就是让程序快速执行,避免用户等待页面加载的时间过长,当然现在我们不想讨论他的优点,他的缺点就是我们现在遇到的问题,我们想要拿到数据再执行下一行代码。

await 意为等待

显然 异步执行的方法,能够通过这个关键字,等待请求结果,实现将异步执行的方法变成同步的。

好了,问题解决,只要在请求时加上await就可以了!

console.log('请求前的代码')
let user = await this.$http.post('/api/user/get', {Id: '00001'})
console.log('请求后的代码,请求结果:' + user)

结果输出:

请求前的代码
请求后的代码,请求结果:{"Id": "00001", .... }

是的,结果确实是正确的,但还有一个规则还没有讲,那就是 async 与 await 必须同时出现 所以我们的代码实际是这样的:

asycn getUser() {
    // ... 其他代码
    console.log('请求前的代码')
    let user = await this.$http.post('/api/user/get', {Id: '00001'})
    console.log('请求后的代码,请求结果:' + user)
    // ... 其他代码
}
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址