时间:2021-05-28
本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了ES6中异步对象Promise用法。分享给大家供大家参考,具体如下:回忆一下ES5中的怎么使用异步方法//es5中的异步回调letajax=fun
本文实例讲述了ES6新数据结构Map功能与用法。分享给大家供大家参考,具体如下:新数据结构MapJavaScript中对象的本质是键值对的集合,但是键只能是字符
先前了解了ES6的Promise对象,来看看jQuery中的Promise,也就是jQuery的Deferred对象。打开浏览器的控制台先。vardefer=$
本文实例讲述了ES6数组与对象的解构赋值。分享给大家供大家参考,具体如下:数组的解构赋值基本用法ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,
Promise是ES6中的函数,规范了如何处理异步任务的回调函数,功能类似于jQuery的defferred。简单说就是通过promise对象的不同状态调用不同