首页 / JAVASCRIPT / js同步、异步、promise

js同步、异步、promise

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js同步、异步、promise，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3404字，纯文字阅读大概需要5分钟。

内容图文

同步

  • 在初期的时候代码执行的时候都是同步，导致当时的代码加载很慢
  • 比如
	console.log(1) 
	alart(2)
	console.log(3)
	// 这串代码就是同步，由上而下依次执行，当执行到alart的时候，你如果不点确定他永远不会执行下一步

总结：当代码需要访问数据时，需要一定的时间，如果是同步的话，他会一直等到数据访问完成，然后在继续执行剩余代码，严重影响用户体验度

异步

  • 异步先对于同步来说，就好很多了，并且大大提高了用户的体验度
  • 异步是什么呢，异步就是回调函数，回调函数就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。这个过程就叫做回调。
  • 异步执行顺序
	console.log(1)
	setTimeout(function(){
		console.log(2)
	},1000}
	console.log(3)
	setTimeout(function(){
		console.log(4)
	},0}
	console.log(5)
	// 以上代码执行顺序依次为，1、3、5、4、2
	// 异步就是一条类似于支线任务，同步就是主线任务，当主线都完成后，然后在执行支线任务

众所周知，javascript是一门单线程\异步、非阻塞、解释型脚本语言。所谓单线程，就是当上一句代码没执行完时，下一句代码不会执行。 所以当在页面中需要请求数据时，如果数据都是以单线程的形式请求，会造成上面的数据没有请求到时，下面的数据也不会发送请求，造成很卡的现象。
解决这个问题我们可以将请求代码写成异步请求的格式（ajax，axios）；

虽然js引擎只维护一个主线程用来解释执行JS代码，但实际上浏览器环境中还存在其他的线程，例如处理AJAX，DOM，定时器等，我们可以称他们为工作线程。同时浏览器中还维护了一个消息队列，主线程会将执行过程中遇到的异步请求发送给这个消息队列，等到主线程空闲时再来执行消息队列中的任务。

同步任务的缺点是阻塞，异步任务的缺点是会使代码执行顺序难以判断。两者比较一下我们还是更倾向于后者。所以这里写个例子对时间循环做下总结。

console.log('start')
Promise((resovle,reject)=>{
 console.log('1')
}).then(()=>{
  setTimeout(() => {
     console.log('2')
  },0)
  console.log('3')
})
console.log('4')
setTimeout(() => {
  console.log('5')
},0)
console.log('end')
// 这段代码的执行顺序为
start ，1 , 4 ，end , 3 , 5 , 2

做下解释，因为Promise 本身为同步操作，一旦调用直接执行，而then方法调用的回调函数为微任务，所以会暂存到微任务队列中。setTimeout也为异步，但setTimeout为宏任务放入宏任务队列，在执行异步队列时，首先执行微任务中then的回调，又遇见了setTimeout宏任务再放入宏任务队列，等所有微任务执行完毕时，执行宏任务。

利用promise可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，promise对象提供统一的接口，使得控制异步操作更加容易。

但注意promise无法取消，一旦建立就会立即执行，无法中途取消。而且，如果不设置回调函数，promise内部抛出的错误不会反映到外部。当处于Pending状态时，无法得知进展到哪一个阶段。
1）promise有三个状态：
Pending-promise的初始状态，等到任务完成或是被拒绝；Resolved-执行完成并且成功的状态；Rejected-执行完成并且失败的状态。此三个状态不能相互逆转。
2）promise对象必须实现then方法，可以说then是promise的核心，而且then方法必须返回一个promise对象，同一个promise对象可以注册多个then方法，并且回调的执行顺序和他们注册的顺序一致。
3）then方法接收两个回调函数，他们分别是成功时的回调和失败时的回调。但是往往现在我们用catch方法来表示失败的回调函数

 let promise = new Promise (function(resolve,reject){
  if(/*异步执行成功*/){
   resolve(res)
  }else{
   reject(err)
  }
 ) 
promise.then((res)=>{
 console.log(res)
).catch((err)=>{
 console.log(err)
})

async的基础用法

  • async对Promise进行了封装，是generator的语法糖，极大的减少了generator的复杂度。async返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，async必须和await一起使用，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
 const getList = async function(){
  var {data} = await this.$axios.get('/请求路径')
  return data
 }

内容总结

以上是互联网集市为您收集整理的js同步、异步、promise全部内容，希望文章能够帮你解决js同步、异步、promise所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1032692.html

来源：【匿名】