Vue数据同步获取
如果我们的业务逻辑需要请求多个数据,并且后一个请求依赖于前一个请求的结果,这时候我们更不能保证数据获取顺序,因此我们需要将异步请求改成同步,以保证业务逻辑的正确性。
async 与 awaitasync 意为
异步的,其放在我们所定义的 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) // ... 其他代码 }