es6中Promise 对象基本功能与用法实例分析
本文实例讲述了es6中Promise对象基本功能与用法。分享给大家供大家参考，具体如下：
Promise是异步编程的一种解决方案，解决——回调函数和事件
ES6规定，Promise对象是一个构造函数，用来生成Promise实例。
下面代码创造了一个Promise实例。
基本用法
ES6规定，Promise对象是一个构造函数，用来生成Promise实例。
constpromise=newPromise(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对象的简单例子
functionfun(ms){
returnnewpromise((res,rej)=>{
setTimeout(res,ms)
})
}
fun(100).then((val)=>{
console.log(val)
})
promise还可以用来加载图片
functionloadImageAsync(url){
returnnewPromise(function(resolve,reject){
constimage=newImage();
image.onload=function(){
resolve(image);
};
image.onerror=function(){
reject(newError('Couldnotloadimageat'+url));
};
image.src=url;
});
}
上面代码中，使用Promise包装了一个图片加载的异步操作。如果加载成功，就调用resolve方法，否则就调用reject方法。
2，用Promise对象实现的Ajax操作的例子。
constgetJSON=function(url){
constpromise=newPromise(function(resolve,reject){
consthandler=function(){
if(this.readyState!==4){
return;
}
if(this.status===200){
resolve(this.response);
}else{
reject(newError(this.statusText));
}
};
constclient=newXMLHttpRequest();
client.open("GET",url);
client.onreadystatechange=handler;
client.responseType="json";
client.setRequestHeader("Accept","application/json");
client.send();
});
returnpromise;
};
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方法就起到这个作用。
constjsPromise=Promise.resolve($.ajax('/whatever.json'));
上面代码将jQuery生成的deferred对象，转为一个新的Promise对象。
Promise.resolve等价于下面的写法。
Promise.resolve('foo')
//等价于
newPromise(resolve=>resolve('foo'))
//Promise.resolve方法的参数分成四种情况。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。