集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都web前端简聊ES6-Promise和Async

发布者: 成都达内     浏览次数:     发布时间:2019-05-24 11:21:03

成都web前端异步编程在前端开发中尤为常见,从最早的XHR,到后来的各种封装ajax,再到DOM事件触发的回调,无不涉及异步编程。ES6中新提出的异步解决方案:Promise和async/await。...

  成都web前端异步编程在前端开发中尤为常见,从最早的XHR,到后来的各种封装ajax,再到DOM事件触发的回调,无不涉及异步编程。今天咱们来聊聊ES6中新提出的异步解决方案:Promise和async/await。

  Promise的原理和基本用法

  Promise的原理

  Promise 是一种对异步操作的封装,可以通过独立的接口添加在异步操作执行成功、失败时执行的方法。主流的规范是 Promises/A+。

  Promise中有几个状态:

  * pending: 初始状态, 非 fulfilled 或 rejected;

  * fulfilled: 成功的操作,为表述方便,fulfilled 使用 resolved 代替;

  * rejected: 失败的操作。

  成都web前端简聊ES6-Promise和Async

  pending可以转化为fulfilled或rejected并且只能转化一次,也就是说如果pending转化到fulfilled状态,那么就不能再转化到rejected。并且fulfilled和rejected状态只能由pending转化而来,两者之间不能互相转换。

  Promise的基本用法

  Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。

  resolve的用法

  var p = new Promise(function(resolve, reject){

  //做一些异步操作

  setTimeout(function(){

  resolve('随便什么数据');

  }, 2000);

  })

  p.then(res => {

  console.log(res) // '随便什么数据'

  })

  Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来讲,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。

  在上面的代码中,我们执行了一个异步操作,也就是setTimeout,2秒后,并且调用resolve方法,表示异步操作执行成功。

  reject的用法

  javascript var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ reject('随便什么数据'); }, 2000); }) p.catch(err => { console.log(err) // '随便什么数据' })上面我们在异步操作中调用了reject方法,也就是说把Promise的状态由pending转换到了fulfilled状态,最后可以通过Promise实例对象的catch()方法获取异步数据。

  Async/Await简介与用法

  异步操作是 JavaScript 编程的麻烦事,很多人认为async函数是异步操作的终极解决方案。

  Async/Await简介

  async/await是写异步代码的新方式,优于回调函数和Promise。

  async/await是基于Promise实现的,它不能用于普通的回调函数。

  async/await与Promise一样,是非阻塞的。

  async/await使得异步代码看起来像同步代码,再也没有回调函数。但是改变不了JS单线程、异步的本质。

  Async/Await的用法

  使用await,函数必须用async标识

  await后面跟的是一个Promise实例或者是其他的任意js表达式(意义不大)

  var fun = async () => {

  let result = await Promise.resolve(123)

  console.log(result)

  }

  fun() // 123

  await等待的虽然是promise对象,但是不用调用.then()方法就能直接得到返回值。

  Async/Await的应用

  Promise虽然一方面解决了callback的回调地狱,但是相对的把回调“纵向发展”了,形成了一个回调链。example:

  function sleep(wait) {

  return new Promise((res,rej) => {

  setTimeout(() => {

  res(wait)

  },wait)

  })

  }

  /*

  let p1 = sleep(100)

  let p2 = sleep(200)

  let p =*/

  sleep(100).then(result => {

  return sleep(result + 100)

  }).then(result02 => {

  return sleep(result02 + 100)

  }).then(result03 => {

  console.log(result03)

  })

  控制台输出:

  300

  后面的结果都是依赖前面的结果。

  改成async/await写法就是:

  async function demo() {

  let result01 = await sleep(100)

  //上一个await执行之后才会执行下一句

  let result02 = await sleep(result01 + 100)

  let result03 = await sleep(result02 + 100)

  // console.log(result03);

  return result03

  }

  demo().then(result => {

  console.log(result)

  })

  因为async返回的也是promise对象,所以用then接受就行了。

  结果:

  成都web前端300需要注意的就是 await是强制把异步变成了同步,这一句代码执行完,才会执行下一句。

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市人民南路一段86号“城市之心”大厦26楼

联系电话:15023458194

公交路线:成都市人民南路(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56