什么是异步

news2025/2/24 0:22:27

文章目录

  • 前言
  • 一、异步是什么?
  • 二、举个例子来理解异步
    • 1.异步最典型的例子就是“回调函数”
  • 总结

前言

在vue的过程中,我们一定会遇到诸如:

function(参数).then(res=>{})

形式的代码。到底怎么编译执行的呢 ?举个例子就懂了。


一、异步是什么?

          异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念。在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。

        简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。

       以上是菜鸟教程上的解释。而另一种解释就是:

给你两个容器,一个叫同步,一个叫异步,把要执行的代码分别分到同步和异步里面,先执行同步同时异步待编译,等同步执行完后执行异步里面的代码。

二、举个例子来理解异步

1.异步最典型的例子就是“回调函数”

在写vue的过程中,我们一定会遇到诸如:

function(参数).then(res=>{})

的代码,这就是异步(包含回调函数)

 随便写一个异步:

//<button @click="submit">提交</button>

//调用函数add()

// 异步程序,他会先执行外面的代码再执行里面的回调函数

    submit() {  

         console.log("外面的代码-1")

          add().then(res => {

            console.log(res)

            console.log("里面的代码")

          });

         console.log("外面的代码-2")

        }

执行的结果就可以看出他的执行顺序:

外面的代码-1

外面的代码-2

里面的代码


总结

这个例子中.then(res=>{}),就是一个回调函数。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405887.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Jetpack】ViewModel 架构组件 ( 视图 View 和 数据模型 Model | ViewModel 作用 | ViewModel 生命周期 | 代码示例 | 使用注意事项 )

文章目录一、Activity 遇到的问题二、视图 View 和 数据模型 Model三、ViewModel 架构组件作用四、ViewModel 代码示例1、ViewModel 视图模型2、Activity 组件3、UI 布局文件4、运行效果五、ViewModel 生命周期六、ViewModel 使用注意事项一、Activity 遇到的问题 Activity 遇到…

宝塔部署nodejs项目

前言 部署操作很简单&#xff0c;网上也有很多教程&#xff0c;不过我还是踩坑了&#xff0c;这里记录一下&#xff0c;给其他人也避避坑吧。 步骤 首先你已经有了服务器&#xff0c;并且打开了宝塔面板&#xff0c;其次准备好你的nodejs项目。 在宝塔安装pm2管理器&#xf…

Nginx 调整文件上传大小限制

使用3A服务器做了网页&#xff0c;感觉挺不错的&#xff0c;使用LNMP环境 用Nginx部署了前端&#xff0c;发现上传附件大一点就会报错&#xff0c;查看配置文件&#xff0c;发现spring的附件配置已经配置了。那么就看下Nginx的body设置。nginx文件上传默认是1MB。 在 server 模…

VUE3TS: Vue3+TS的项目搭建

简介 通过 Vue-cli4 创建的 Vue3TS 的项目&#xff0c;并进行一些基础使用的举例。 此例是以 VSCode编辑器 进行的编码。 一、项目搭建 1. 进入命令提示符窗口 在要搭建项目的文件夹中&#xff0c;点击路径&#xff0c;输入CMD并按回车 2. 查看node版本、Vue-cli版本 2…

Android 架构之长连接技术

上文中我们提到了HttpDNS&#xff0c;虽然它比系统DNS更优&#xff0c;但终归还是要做DNS操作。而长连接都是IP直接连接&#xff0c;因此没有DNS相关的开销和耗时。 3. 如果有大量网络请求&#xff0c;可以明显减少网络延时&#xff0c;节省带宽 对于大型App而言&#xff0c;…

npm——安装、卸载与更新

npm 官方文档&#xff1a;https://docs.npmjs.com/ 什么是npm npm&#xff08;“Node 包管理器”&#xff09;是 JavaScript 运行时 Node.js 的默认程序包管理器。 它也被称为“Ninja Pumpkin Mutants”&#xff0c;“Nonprofit Pizza Makers”&#xff0c;以及许多其他随机…

Vue通知提醒框(Notification)

项目相关依赖版本信息 可自定义设置以下属性&#xff1a; 自动关闭的延时时长&#xff08;duration&#xff09;&#xff0c;单位ms&#xff0c;默认4500ms消息从顶部弹出时&#xff0c;距离顶部的位置&#xff08;top&#xff09;&#xff0c;单位像素px&#xff0c;默认24p…

WebSocket开发(心跳监测)功能

前言 在之前的文章中完成了客服对话的Demo功能&#xff0c;但是现在的连接是无限制的长时间连接没有做心跳、失活、超时断连等功能&#xff0c;心跳的实现方法有很多种&#xff0c;并且WebSocket就提供了ping/pong类型的消息。 心跳的触发方式也分两种&#xff1a; 客户端触…

微信小程序实现图片上传

前言 手机上传图片的功能大家一定都用过吧&#xff0c;今天教你用微信小程序实现这个小功能。 实现效果如下&#xff1a; 实现思路&#xff1a; 首先我们需要定义一个存放图片的数组&#xff0c;通过方法拿取图片的详细信息&#xff0c;然后调用微信小程序的 wx.uploadFile 方…

element ui datepicker时间控件实现范围选择周,季,年。

因项目要求&#xff0c;需日&#xff0c;周&#xff0c;月&#xff0c;季&#xff0c;年五种日期范围选择器&#xff0c;故参考文章&#xff08;在末尾&#xff09;后分享 一.效果图 二、版本及下载 1.实现需要修改源码&#xff0c;目前修改的版本为2.15.3&#xff0c;所以想要…

Vue3路由配置createRouter、createWebHistory、useRouter,useRoute

目录 手动配置Vue-router环境&#xff1a; 组件内部跳转路由、传参useRouter,useRoute Vue3和Vue2基本差不多&#xff0c;只不过需要将createRouter、createWebHistory从vue-router中引入&#xff0c;再进行使用。 手动配置Vue-router环境&#xff1a; 1、下载包&#xff1a…

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘result‘)

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading result) 如题所示问题&#xff0c;耽误三天寻找bug&#xff0c;终于在我睡意朦胧之际发现了一道光&#xff0c;发现 await 出现的三个点&#xff1a; 于是打开 findAllCategory()这个函数 对应…

电商后台管理系统简介

项目介绍 黑马后台管理系统是一个电商后台管理系统的前端项目&#xff0c;基于VueElement实现。 主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能 开发技术 此项目开发我用到的技术有&#xff1a;vue2node.…

Vant 2 - 移动端 Vue 组件库 _ 问题记录

目录 Popup 弹出层 DatetimePicker 时间选择 Field 输入框 Picker 选择器 List 列表 Tab 标签页 发布初衷 &#xff1a; 记录在移动端项目中使用 Vant 2 组件库时遇到的各种问题 &#xff0c; 方便以后再次遇到类似问题 &#xff0c; 能够快时查阅解决 &#xff0c; …

Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源

问题&#xff1a;Vue3TypeScriptVite的项目中如何使用require动态引入类似于图片等静态资源&#xff01; 描述&#xff1a;今天在开发项目时&#xff08;项目框架为Vue3TypeScriptVite&#xff09;需要 动态引入静态资源&#xff0c;也就是img标签的src属性值为动态获取&#…

Lodash 使用及常用方法

简介 Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 官网 Lodash 简介 | Lodash 中文文档…

TypeScript详解十六:类型声明(declare)

目录前言一、类型声明的作用&#xff1f;1.1 declare 关键字1.2 示例二、常见的几种类型声明2.1 普通类型声明2.2 外部枚举2.3 命名空间三、类型声明文件3.1 模拟类型声明文件&#xff0c;以 jquery 为例3.2 使用手动实现的jquery.d.ts声明文件3.3 第三方声明文件&#xff08;以…

Django web 开发(三) - Django的使用

文章目录Django安装Django安装Pythonpip加速安装Django创建项目文件介绍简单访问APP添加新的app注册app创建blog的页面templates模板templates模板语法单一变量列表循环(列表)字典循环(字典)列表套字典条件判断请求和响应案例: 用户登录数据库操作安装第三方模块ORM创建数据库D…

node版本、npm版本随意切换

前言 随着项目越做越多&#xff0c;难免会有a项目需要12.x的node版本&#xff0c;b项目需要>16.0.0的情况。 为了避免出现node版本切换的繁琐&#xff0c;特意找了这么一个工具&#xff0c;主要是方便管理node版本。 请按照以下步骤来实现 官方地址: 传送门 1、下载软件 …

使用react实现后台管理系统项目

一.开发React必须依赖三个库 1.react&#xff1a;包含react所必须的核心代码 2.react-dom&#xff1a;react渲染在不同平台所需要的核心代码 3.babel&#xff1a;将jsx转换成React代码的工具 二.React的依赖引入 1.方式一&#xff1a;直接CDN引入 2.方式二&#xff1a;下载后&…