前端异步是什么?哪些情况下会发生异步?

前端异步是什么?哪些情况下会发生异步?

异步是什么?

这里就不拿官方的解释来解答了,只以个人理解来回答问题,轻喷。我们知道 JavaScript 是单线程的,不像 java 等语言是多线程的,所以一般情况下,js 代码是一行一行的执行的。但是某些时候需要用异步来提升性能,比如说一个网络请求需要服务端返回数据 30s,js 不可能一直等待服务器返回再执行其他代码,这时候 js 就会跳过这个过程,继续往下执行,直到没有代码要执行了,这时候后端返回数据了,js 再接着执行返回数据之后的代码。这个过程就是一个异步。


例子

再举个栗子,你跟你女朋友不在一个班,但是你去找她的时候,发现她不在座位上,这时候你有 2 种选择,1. 在座位上等她,然后啥都不干。2. 你回到自己的座位上,继续抄作业,给她发消息等她回来了,让她告诉你,你再去找她。第一种就是同步,第二种就是异步,实际上就是 js 的事件委托。很显然第二种方式效率更高。

哪些情况下会发生异步

个人总结了一下,总共有下列情况会发生异步

  1. 回调函数,这个很常见,很多内置函数都支持接收回调函数来异步代码
  2. 事件监听,很多 dom 操作,click 事件等都是异步的
  3. 订阅与发布,这个常见是在 angularvue 中,用on来监听事件,emit 来发布事件,长用与父子组件交互
  4. promise 是 es6 新增的特性,能通过 resolve 和 reject 来执行异步操作,长与 async await 配合使用。

具体代码示例

asyncFun() {
	return new Promise((resolve) => {
		console.log('1', '时间:', moment().format('YYYY-MM-DD hh:mm:ss'))
		setTimeout(() => {
			console.log('2', '时间:', moment().format('YYYY-MM-DD hh:mm:ss'))
			resolve()
		}, 1000)
		console.log('3', '时间:', moment().format('YYYY-MM-DD hh:mm:ss'))
	})
},
async run() {
	await this.asyncFun()
}

运行截图:
运行截图

可以看到,代码采用 setTimeout 的回调函数来执行一个异步,采用 promise 配合 async await 来完成整个过程,代码的执行循序就是 1,3 然后过 1s 输出 2.后面会有详细的 promise async await 的讲解。


线上体验地址
所有的源码都可以在我的仓库地址:下载
个人公众号:
公众号

  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    271 引用 • 1353 回帖 • 214 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    612 引用 • 1109 回帖 • 768 关注
  • 异步
    10 引用 • 51 回帖
  • Promise
    3 引用 • 3 回帖

赞助商 我要投放

回帖
请输入回帖内容 ...