扒一扒VueCLI3.0中Axios异步请求同步化[通俗易懂]

扒一扒VueCLI3.0中Axios异步请求同步化[通俗易懂]前台经常会遇到请求同步和异步的问题,今天咱们来聊一聊vue中同步请求和异步请求那些事儿。

大家好,欢迎来到IT知识分享网。

前台经常会遇到请求同步和异步的问题,今天咱们来聊一聊vue中同步请求和异步请求那些事儿。

扒一扒VueCLI3.0中Axios异步请求同步化[通俗易懂]

说到接口的请求同步和异步问题,最早接触Ajax中就存在,Ajax传递的参数有一个async,默认情况下是false,也就是异步传输的,如果想阻塞浏览器的线程,将接口请求依次进行的化,需要将async参数设置为true。

到了es6时出现了Promise,这让我们脱离了需要多次回调的情况,到了es7时出现了async-await,那么async-await又有什么神奇之处呢?

Promise

Promise的出现是为了防止前台的进程被冻结,它的出现可以允许多个任务同时进行,也就是所谓的异步操作。

Promise主要用处在以下几点

  • 1. 用于异步处理操作
  • 2. 将异步操作队列化,按照顺序执行操作,并返回相应结果
  • 3. 在对象之间传递和操作promise,帮助处理队列中的操作方法

异步操作的主要用途包括事件的监听和事件的回调。自从前台使用nodejs进入常态化之后,无阻塞的处理高并发成为了重中之重,也就是处理好异步操作。

Promise的一个简单示例

扒一扒VueCLI3.0中Axios异步请求同步化[通俗易懂]

其中resolve返回成功的结果,reject返回失败的结果。

扒一扒VueCLI3.0中Axios异步请求同步化[通俗易懂]

这个简单例子模拟promise的异步操作,2秒钟后返回hello world。

Promise.all() 可以批量执行

扒一扒VueCLI3.0中Axios异步请求同步化[通俗易懂]

扒一扒VueCLI3.0中Axios异步请求同步化[通俗易懂]

返回结果可以看出,两个方法依次异步执行,等全部执行完毕后,一起输出结果,这在实际业务中相当有用!!!

Async-await

那么既然es6中已经有promise了,也相当好用,为什么在es7中又出现了async-await呢?

其实async-await是基于promise的,它是promise和generator的语法糖。Async-await可以让我们在使用promise时更加流畅,代码更加简洁。

Await不能够单独使用,它必须出现在async作用的方法中。从字面意思也可以看的出,wait就是等待的意思,也就是等着我执行完毕,相当于将异步方法同步化。

下面是一个async-await的小栗子

扒一扒VueCLI3.0中Axios异步请求同步化[通俗易懂]

扒一扒VueCLI3.0中Axios异步请求同步化[通俗易懂]

从执行的结果可以看出,浏览器执行async-await的顺序为,正常的表达式顺序执行,遇到promise的异步线程时,需要等待异步线程返回结果,然后顺序执行后面的方法,这样就可以将异步的方法同步化了。

如果顺序执行多个任务的话,可以明显看出async-await的优势了,代码如下:

扒一扒VueCLI3.0中Axios异步请求同步化[通俗易懂]

扒一扒VueCLI3.0中Axios异步请求同步化[通俗易懂]

Axios中使用async-await进行同步化

在VueCLI3.0项目中集成axios进行后台接口的请求数据,有时候需要等待返回数据然后再进行下一步操作,如果是用ajax进行访问数据的话可以这样

扒一扒VueCLI3.0中Axios异步请求同步化[通俗易懂]

直接设置async参数为false即可。

然而axios没有ajax这样直接设置的参数,那怎么办呢?

所以就可以使用之前说到的async-await了,也就是使用 async-await 将 axios 异步请求同步化。

下面一个简单的栗子

扒一扒VueCLI3.0中Axios异步请求同步化[通俗易懂]

如果将返回的结果做不同处理的话,以可嵌套一次promise,如下

扒一扒VueCLI3.0中Axios异步请求同步化[通俗易懂]

小结

通过这一篇的讲解,讲述了前端程序的异步,包括promise的原理,用处,以及后来的async-await,并且了解了async-await的作用,最后将async-await用到了axios实例中,来解决axios的异步请求同步化问题。

希望这篇文章对前台异步请求同步化问题有困扰的朋友带来帮助。

感兴趣的可以加关注,谢谢!

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/6961.html

(0)
上一篇 2023-01-03 09:54
下一篇 2023-01-03 09:54

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信