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 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
XmlUtils JS操作XML工具类
Oct 01 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 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
PHP解决中文乱码
2017/04/28 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
Javascript 解疑
2009/11/11 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
Python创建文件和追加文件内容实例
2014/10/21 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
竞选大队干部演讲稿
2014/09/11 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
Nginx反向代理配置的全过程记录
2021/06/22 Servers
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis