ES6 Promise对象的含义和基本用法分析


Posted in Javascript onJune 14, 2019

本文实例讲述了ES6 Promise对象的含义和基本用法。分享给大家供大家参考,具体如下:

1.Promise的含义

Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理更强大。

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件 (通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。

Promise对象有以下2个特点:

1.对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)Resolved(已完成)Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。

2.一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved;从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对Promise对象田静回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

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

2.基本用法

ES6规定,Promise对象是一个构造函数,用来生成Promise实例

var promise = new Promise(function(resolve,reject){
 // ... some code
 if(/* 异步操作成功 */){
  resolve(value);
 }else{
  reject(error);
 }
});

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolvereject。它们是两个函数,又JavaScript引擎提供,不是自己部署。

resolve函数的作用,将Promise对象的状态从“未完成”变成“成功”(即从Pending变为Resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject函数的作用是,在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

Promise实例生成以后,可以用then方法分别制定Resolved状态和Rejected状态的回调函数:

promise.then(function(value){
 // sucess
},function(error){
 // failure
});

then方法可以接受2个回调函数作为参数,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

下面是一个Promise对象的简单例子:

function timeout(ms){
 return new Promise((resolve,reject)=>{
  setTimeout(resolve,ms,'done');
 });
}
timeout(100).then((value)=>{
 console.log(value);
});

上面代码中,timeout方法返回一个Promise实例,表示一段事件以后才会发生的结果。过了指定的时间(ms参数)以后,Promise实例的状态变为Resolved,就会触发then方法绑定的回调函数。

Promise新建后就会立即执行

let promise = new Promise(function(resolve,rejeact){
 console.log('Promise');
 resolve();
});
promise.then(function(){
 console.log('Resolved');
});
console.log('Hi');
// Promise
// Hi
// Resolved

上面代码中,Promise新建后立即执行,所以首先输出的是”Promise”,然后then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以”Resolved”最后输出。

下面是异步加载图片的例子:

function loadImageAsync(url){
 return new Promise(function(resolve,reject){
  var image = new Image();
  image.onload = function(){
   resolve(image);
  };
  image.onerror = function(){
   reject(new Error('Could not load image at' + url));
  };
  image.src = url;
 });
}

下面是一个用Promise对象实现Ajax操作的例子:

var getJSON = function(url){
 var promise = new Promise(function(resolve,reject){
  var client = new XMLHttpRequest();
  client.open('GET',url);
  client.onreadystatechange = handler;
  client.responseType = 'json';
  client.setRequestHeader('Accept','application/json');
  client.send();
  function handler(){
   if(this.readyState !== 4){
    return;
   }
   if(this.status === 200){
    resolve(this.response);
   }else{
    reject(new Error(this.statusText));
   }
  }
 });
 return promise;
};
//
getJSON('/posts.jons').then(function(json){
 consoloe.log(json);
},function(error){
 console.log('出错了');
});

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript Array对象基础知识小结
Nov 16 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
ES6顶层对象、global对象实例分析
Jun 14 #Javascript
ES6数组与对象的解构赋值详解
Jun 14 #Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 #Javascript
通过JS深度判断两个对象字段相同
Jun 14 #Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 #Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 #Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 #Javascript
You might like
Array of country list in PHP with Zend Framework
2011/10/17 PHP
PHP的引用详解
2015/02/22 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
总结Python中逻辑运算符的使用
2015/05/13 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Python实现基于POS算法的区块链
2018/08/07 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python实现微信防撤回神器
2019/04/29 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
工程质量月活动方案
2014/02/19 职场文书
公司委托书格式范文
2014/04/04 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
奖励申请报告范文
2015/05/15 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
Tomcat配置访问日志和线程数
2022/05/06 Servers