es6中Promise 对象基本功能与用法实例分析


Posted in Javascript onFebruary 23, 2020

本文实例讲述了es6中Promise 对象基本功能与用法。分享给大家供大家参考,具体如下:

Promise 是异步编程的一种解决方案,解决——回调函数和事件

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

下面代码创造了一个Promise实例。

基本用法

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

const promise = new Promise(function(resolve, reject) {
 //resolve (data)  成功
 //reject  (error )失败
});

Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {
 // success
}, function(error) {
 // err
});

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

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

function fun(ms){
 return new promise((res,rej) => {
 setTimeout(res,ms)
 })
}
fun(100).then((val) => {
 console.log(val)
})

promise还可以用来加载图片

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

上面代码中,使用Promise包装了一个图片加载的异步操作。如果加载成功,就调用resolve方法,否则就调用reject方法。

2,用Promise对象实现的 Ajax 操作的例子。

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

注意,调用resolve或reject并不会终结 Promise 的参数函数的执行。

Promise.prototype.finally()

finally方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

上面代码中,不管promise最后的状态,在执行完then或catch指定的回调函数以后,都会执行finally方法指定的回调函数,finally本质上是then方法的特例。

Promise.resolve()

//有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用。
const jsPromise = Promise.resolve($.ajax('/whatever.json'));

上面代码将 jQuery 生成的deferred对象,转为一个新的 Promise 对象。

Promise.resolve等价于下面的写法。

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
//Promise.resolve方法的参数分成四种情况。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

Javascript 相关文章推荐
JavaScript this 深入理解
Jul 30 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
vue实现文字加密功能
Sep 27 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 #Javascript
原生javascript单例模式的应用实例分析
Feb 23 #Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 #Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 #Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 #Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 #Javascript
vue.js实现简单的计算器功能
Feb 22 #Javascript
You might like
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
PHP Cookie学习笔记
2016/08/23 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
分享Javascript实用方法二
2015/12/13 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
JS实现打字游戏
2019/12/17 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
python写xml文件的操作实例
2014/10/05 Python
python中global与nonlocal比较
2014/11/21 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
python与idea的集成的实现
2020/11/20 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
车间操作工岗位职责
2013/12/19 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
国庆节演讲稿
2014/05/27 职场文书
社区活动策划方案
2014/08/21 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技