哪些网站可以做商家,苏州网站制作 网站,网上智慧团建网站登录,关于开展网站建设工作的通知前台经常会遇到请求同步和异步的问题#xff0c;今天咱们来聊一聊vue中同步请求和异步请求那些事儿。说到接口的请求同步和异步问题#xff0c;最早接触Ajax中就存在#xff0c;Ajax传递的参数有一个async#xff0c;默认情况下是false#xff0c;也就是异步传输的#x…前台经常会遇到请求同步和异步的问题今天咱们来聊一聊vue中同步请求和异步请求那些事儿。说到接口的请求同步和异步问题最早接触Ajax中就存在Ajax传递的参数有一个async默认情况下是false也就是异步传输的如果想阻塞浏览器的线程将接口请求依次进行的化需要将async参数设置为true。到了es6时出现了Promise这让我们脱离了需要多次回调的情况到了es7时出现了async-await那么async-await又有什么神奇之处呢PromisePromise的出现是为了防止前台的进程被冻结它的出现可以允许多个任务同时进行也就是所谓的异步操作。Promise主要用处在以下几点1. 用于异步处理操作2. 将异步操作队列化按照顺序执行操作并返回相应结果3. 在对象之间传递和操作promise帮助处理队列中的操作方法异步操作的主要用途包括事件的监听和事件的回调。自从前台使用nodejs进入常态化之后无阻塞的处理高并发成为了重中之重也就是处理好异步操作。Promise的一个简单示例其中resolve返回成功的结果reject返回失败的结果。这个简单例子模拟promise的异步操作2秒钟后返回hello world。Promise.all() 可以批量执行返回结果可以看出两个方法依次异步执行等全部执行完毕后一起输出结果这在实际业务中相当有用Async-await那么既然es6中已经有promise了也相当好用为什么在es7中又出现了async-await呢其实async-await是基于promise的它是promise和generator的语法糖。Async-await可以让我们在使用promise时更加流畅代码更加简洁。Await不能够单独使用它必须出现在async作用的方法中。从字面意思也可以看的出wait就是等待的意思也就是等着我执行完毕相当于将异步方法同步化。下面是一个async-await的小栗子从执行的结果可以看出浏览器执行async-await的顺序为正常的表达式顺序执行遇到promise的异步线程时需要等待异步线程返回结果然后顺序执行后面的方法这样就可以将异步的方法同步化了。如果顺序执行多个任务的话可以明显看出async-await的优势了代码如下Axios中使用async-await进行同步化在VueCLI3.0项目中集成axios进行后台接口的请求数据有时候需要等待返回数据然后再进行下一步操作如果是用ajax进行访问数据的话可以这样直接设置async参数为false即可。然而axios没有ajax这样直接设置的参数那怎么办呢所以就可以使用之前说到的async-await了也就是使用 async-await 将 axios 异步请求同步化。下面一个简单的栗子如果将返回的结果做不同处理的话以可嵌套一次promise如下小结通过这一篇的讲解讲述了前端程序的异步包括promise的原理用处以及后来的async-await并且了解了async-await的作用最后将async-await用到了axios实例中来解决axios的异步请求同步化问题。希望这篇文章对前台异步请求同步化问题有困扰的朋友带来帮助。感兴趣的可以加关注谢谢
