首页 > 其他分享 >vue axios异步处理方案

vue axios异步处理方案

时间:2023-02-22 11:12:38浏览次数:55  
标签:异步 axios await vue Promise async setTimeout

vue axios异步处理方案

1.使用setTimeout函数用延时处理(复杂一点逻辑会达不到效果) 

实例:

         setTimeout(() => {
            console.log('1');
          }, 3000);

          setTimeout(() => {
            console.log('2')
          }, 1000);

控制台输出结果:

  结论:settimeout是异步执行,和顺序无关,只和计时时长有关。所以可以通过延时来实现异步处理。

 2.使用new Promise()

Promise是一个构造函数,自己身上有all、reject、resolve这几个方法,结合async与await 轻松就能实现异步处理。

async与await 是 ES8(ECMAScript 2017)引入的新语法,用来简化 Promise 异步操作,使用时需要注意这两个关键字。

1.async(异步的),一般写在函数定义的方法名前面,如果是匿名函数,位置也是最前面

2.await(等待的),一般写在被调用的地方最前面,如果被调用的地方在函数内,那么使用了await后,这个函数就必须用async修饰,否则报错。

 

 

 

关于new Promise()的具体解说,可以参考这篇文章:https://blog.csdn.net/qq_34645412/article/details/81170576

 

标签:异步,axios,await,vue,Promise,async,setTimeout
From: https://www.cnblogs.com/luckybaby519/p/17143495.html

相关文章

  • 在vue中动态的引入图片为什么要使用require
    在vue中动态的引入图片为什么要使用require有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所以要加上require,我倒着都能背出来............
  • Vue - eslint默认验证,函数名称和括号相连报错
    如果函数名和括号相连,eslint验证会报错,这个可以通过eslint的设置解决:一,打开eslintrc.js,在rules配置中加入:'space-before-function-paren':0完整配置:rules:{/......
  • 研究c#异步操作async await状态机的总结
    前言    前一段时间得闲的时候优化了一下我之前的轮子[DotNetCoreRpc]小框架,其中主要的优化点主要是关于RPC异步契约调用的相关逻辑。在此过程中进一步了解了关于asyn......
  • 04-异步时钟
    异步时钟之前提到同步时钟是来自于同一个源的,那么异步时钟指的就是来自于不同源。它们之间没有固定的相位的关系。上面电路图,几个时钟之间是什么关系呢?首先ClockA和Clo......
  • Vue笔记
    Vue快速入门笔记七大属性学习vue我们必须之到它的7个属性,8个方法,以及7个指令。787原则。el属性用来指示vue编译器从什么地方开始解析vue的语法,可以说是一个占位符......
  • vue2、vue3安装vue-devtools详细版教程
    在使用Vue时,我们推荐在浏览器上安装VueDevtools。VueDevtools是Vue官方发布的调试浏览器插件,可以安装在Chrome和Firefox等浏览器上,直接内嵌在开发者工具中,使用......
  • vue-cli安装依赖 props属性三种方式 混入迷信 插件 elementUI vuex vue Routerd local
    目录回顾vue-cli安装依赖props属性三种方式总结混入mixin插件elementuielementui的使用vuex使用步骤vueRouter基本使用点击跳转路由两种方式路由跳转,携带数据的两种方式区......
  • 【vue-router踩坑】使用vite打包项目vue-router的懒加载无效
    问题如下import{createWebHistory,createRouter}from'vue-router'exportconstconstantRoutes=[{path:'/convert',component:()=>i......
  • Vue高级
    目录Vue高级1.ref属性2.props配置项-父传子自定义属性3.mixin混入--了解4.插件--了解5.scoped样式6.插槽1.匿名插槽2.具名插槽7.Router8.localStorage、sessionStora......
  • props,混入mixin,插件,elementui使用(重点),vuex,vue Router, localStorage系列
    props,混入mixin,插件,elementui使用(重点),vuex,vueRouter,localStorage系列props1.方式一:使用数组props:['msg']2.方式二:使用对象props:[msg:String]3.方式三:使用对......