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

成都web前端培训:JavaScript—Promise的初步使用

发布者: 成都达内     浏览次数:     发布时间:2021-04-12 11:16:51

成都web前端培训:Promise对象是ES6提出的的异步编程的规范。说到异步编程,就不得不说说同步和异步这两个概念。...

  1. 概述

  Promise对象是ES6提出的的异步编程的规范。说到异步编程,就不得不说说同步和异步这两个概念。

  从字面意思理解同步编程的话,似乎指的是两个任务同步运行,如果这样理解就错了(至少笔者再没有接触到这个概念的时候有这种误解)。同步和异步指的是代码指定执行的顺序(结构化编程范式的执行顺序总是由上至下,由前往后的),如果执行的顺序与代码的相同,就是同步;如果不同,就是异步。

  最初,操作系统都是基于命令行的,所有的的语言设计出来也天然是同步的语句,在这种情况下,也不需要异步编程。但是很快,图形操作界面就出来了,所有的程序设计语言都不得不跟GUI打交道了。我们必须了解的是,GUI程序是一个不停绘制的界面程序:

  while(done)

  {

  dosomething();

  drawGUI();

  }

  如果每个循环中执行的任务dosomething()的事件太长,就会导致界面迟迟得不到绘制命令,直观的表现就是卡顿。为了解决这个问题,使用JavaScript作为脚本的浏览器一般都会采用事件循环(Event Loop)的机制:

  将耗时的行为规定为事件,事件与响应回调函数绑定。

  每个循环,优先处理同步代码。

  同步代码完成,按照先后顺序遍历事件。

  在剩下的没有同步代码的循环中,依次执行事件的相应函数。

  这样,在单线程的情况下,就修改了任务的执行顺序,实现了异步的机制。因为同步的行为总是很快完成及时进行了界面绘制,界面卡顿的现象也大为改善了。

  事件循环机制将UI设备的输入输出规定为事件,实际上,耗时的行为非常多,但是一般都与IO相关,与IO相关的行为,JavaScript都提供了异步行为的代码。例如,这里要用的一个加载图片的实例。

  2. 详论

  首先准备一个HTML页面PromiseTest.html,在这个HTML页面中加载JS的脚本PromiseTest.js:

  !DOCTYPE html

  html

  head

  meta charset="utf-8"

  script src="./3rdParty/jquery-3.5.1.js" /script

  title 样例 /title

  /head

  body

  div id = "container" /div

  script src="./PromiseTest.js" /script

  /body

  /html

  原生的JS的图像对象Image,是通过时间的形式来实现图像的异步加载的:

  $(function () {

  var img = new Image();

  img.onload = function () {

  $(img).appendTo($('#container'));

  };

  img.src = "./img.jpg";

  });

  为Image的事件句柄onload,添加一个相应函数,当图像装载完成之后,就将装载好的Image添加到HTML页面的某个div元素子节点下。通过浏览器打开这个页面,会直接显示对应地址的图片。

  这个JS脚本当然也可以通过Promise来改写:

  $(function () {

  function getImg(uri){

  return new Promise(function(resolve, reject){

  var img = new Image();

  img.onload = function () {

  resolve(img);

  };

  img.onerror = function () {

  reject(Error("Load Image Error!"));

  }

  img.src = uri;

  });

  }

  var imgUri = "./img.jpg";

  getImg(imgUri).then(function(img){

  $(img).appendTo($('#container'));

  }, function(error){

  console.error("Failed!", error);

  })

  });

  粗看起来,使用Promise,似乎使得程序显得更加复杂和繁复了。但是我们要深入理解Promise机制的内涵,这样设计并不是为了好玩。

  Promise对象代表的是一个预定要做、但是还未开始做的行为。既然是一个行为,当然得进行计划,并对行为结果做出规定:如果成功了,就执行resolve;如果失败了,就执行reject。一般我们可以定义一个function,并且返回一个Promise对象。

  调用返回Promise对象的function,这样这个想要进行的行为就真正启动了。不过resolve和reject只是两个回调函数,那么就通过then方法来规定成功和失败对应的真正的处理函数。

  可以看到,这样的设计看起来很繁复,但是却很像是一个同步行为:规定一个未完成行为对象,行为完成了如何处理,行为失败了又如何处理。而这也是Promise的目的:使得异步操作更像是一个同步的行为。

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

校区地址:成都市锦江区东大街紫东楼端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号线)

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

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

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