当前位置: 首页 > news >正文

【Vue】中的同步和异步

    同步:在主线程上排队之行的任务,只有在最前面的任务执行完成之后,才之行后面的任务。
       (生活中的例子话糙理不怪:银行排队,只有一个窗口的时候,A业务办理完在接着办理B)
    异步:是指不进入主线程,而是进入了“任务队列”的任务,只有“任务队列”通知主线程,某个异步任务可执行了,该任务才会进入主线程执行。
       (生活中的例子话糙理不怪:多个窗口,可以同时办理业务,互不影响)
         
    同步的优点是:同步是按照顺序一个一个来,不会乱掉,更不会出现上面代码没有执行完就执行下面的代码,
    缺点:是解析的速度没有异步的快;

    异步的优点是:异步是接取一个任务,直接给后台,在接下一个任务,一直一直这样,谁的先读取完先执行谁的,
    缺点:没有顺序 ,谁先读取完先执行谁的 ,会出现上面的代码还没出来下面的就已经出来了,会报错;

    异步任务分为:宏任务   微任务

    宏任务:包含整体代码script /  setTimeout /  setInterval
    微任务:Promise.then(非new Promise) / process.nextTick(node中)

    事件执行顺序:
    1.先执行宏任务,在执行微任务
    2.微任务根据先进先出的顺序执行
    3.微任务清空后在执行宏任务
    3.按先进先出的顺序取出执行

    Promise 实现异步调用
    asnyc/await 实现同步调用
   // 项目中使用的事例:Vue接口请求异步变同步
    created() {
        this.initData();
    }
    methods: {
        async initData() {
            let res = await getList(this.params);
            if (res.message === "成功") {
                this.resultList = res.data;;
            }
        }
    }
// 异步请求同步的方法
    handleClick() {
        return new Promise((resolve,reject) => {   //resolve 成功 ,reject 失败
            getRequest().then(res => {
                //操作1
                resolve();
            }).catch(error =>{
                console.log(error)
                reject()
            })
        })
    },
    test(){
        Promise.all([this.handleClick()]).then(res=>{
            //操作2
        })
    }
    // promise的操作
    const promise = new Promise(function(resolve, reject){
        if(一步操作成功){
            resolve(value);
        }else{
            reject(error);
        }
    })

    // 异步操作
    new Promise((resolve, reject) => {
        resolve(1);
        console.log(2);
    }).then(r => {
        console.log(r);
    });
    // 2

    // 写法一
    const promise = new Promise(function(resolve, reject) {
        try {
            throw new Error('test');
        } catch(e) {
            reject(e);
        }
    });
    promise.catch(function(error) {
        console.log(error);
    });

    // 写法二
    const promise = new Promise(function(resolve, reject) {
        reject(new Error('test'));
    });
    promise.catch(function(error) {
        console.log(error);
    });

相关文章:

  • reduce() 遍历数组
  • 【Vue】中this.$refs的使用
  • 【Vue】分页组件切换分页时未定位到最上面的位置
  • 【Vue】导出 下载excel 方案(点击下载,下载一个excel模板)
  • 【react】语法总结
  • 【React】语法
  • Web前端工程师面试-HTML
  • Javascript Date对象
  • 谷歌浏览器使用记住密码功能后的input背景
  • jQuery为多元素添加统一样式
  • js 判断字符串中是否包含某个字符串
  • js 将两个对象合并成一个对象
  • 修改input的type属性
  • js查找字符串中某个字符出现的位置及次数
  • 2021-07-16 element-ui Radio-group 默认不回显问题
  • CentOS7 安装JDK
  • ESLint简单操作
  • FastReport在线报表设计器工作原理
  • Java新版本的开发已正式进入轨道,版本号18.3
  • nodejs调试方法
  • passportjs 源码分析
  • PHP 使用 Swoole - TaskWorker 实现异步操作 Mysql
  • React16时代,该用什么姿势写 React ?
  • SpringCloud(第 039 篇)链接Mysql数据库,通过JpaRepository编写数据库访问
  • vue数据传递--我有特殊的实现技巧
  • 创建一个Struts2项目maven 方式
  • 从 Android Sample ApiDemos 中学习 android.animation API 的用法
  • 番外篇1:在Windows环境下安装JDK
  • 翻译:Hystrix - How To Use
  • 函数式编程与面向对象编程[4]:Scala的类型关联Type Alias
  • 融云开发漫谈:你是否了解Go语言并发编程的第一要义?
  • 阿里云服务器购买完整流程
  • 好程序员大数据教程Hadoop全分布安装(非HA)
  • 通过调用文摘列表API获取文摘
  • 整理一些计算机基础知识!
  • ###C语言程序设计-----C语言学习(6)#
  • #QT(串口助手-界面)
  • (C语言)字符分类函数
  • (C语言版)链表(三)——实现双向链表创建、删除、插入、释放内存等简单操作...
  • (Redis使用系列) Springboot 使用redis实现接口幂等性拦截 十一
  • (附源码)springboot优课在线教学系统 毕业设计 081251
  • (附源码)计算机毕业设计SSM疫情居家隔离服务系统
  • (个人笔记质量不佳)SQL 左连接、右连接、内连接的区别
  • (一)SpringBoot3---尚硅谷总结
  • (一)UDP基本编程步骤
  • (转)socket Aio demo
  • (转)可以带来幸福的一本书
  • (转)总结使用Unity 3D优化游戏运行性能的经验
  • .NET 8 中引入新的 IHostedLifecycleService 接口 实现定时任务
  • .net core 3.0 linux,.NET Core 3.0 的新增功能
  • .Net 高效开发之不可错过的实用工具
  • .NET正则基础之——正则委托
  • ::什么意思
  • @RequestParam,@RequestBody和@PathVariable 区别
  • [<MySQL优化总结>]