Promise的基本使用方法教程
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Promise的基本使用方法教程,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3356字,纯文字阅读大概需要5分钟。
内容图文
![Promise的基本使用方法教程](/upload/InfoBanner/zyjiaocheng/295/b6f9541c0d1d4534907067155373ffcf.jpg)
const promise = new Promise((resolve, reject) => { //some asynchronous code setTimeout(() => { console.log('执行完成'); resolve('some data'); }, 2000); });
Promise
接收一个函数作为参数,函数有两个参数,resolve
和 reject
分别表示异步操作执行后成功的回调函数和失败的回调函数。
Promise
实例后马上执行。所以通常采用一个函数包含它
function runAsync() { return new Promise((resolve, reject) => { //some asynchronous code setTimeout(() => { console.log('执行完成'); resolve('some data'); }, 2000); }); } runAsync().then((data) => { console.log(data);//可以使用异步操作中的数据 })
runAsync()
执行完调用 then
方法,then()
就相当于我们之前写的回调函数。
resolve 和 reject
function paramTest(){ return new Promise((resolve, reject) => { let number = Math.ceil(Math.random() * 10); if (number < 5) { resolve(number); }else{ reject('out of range'); } }) } paramTest().then((number) => { console.log('resolved'); console.log(number); },(reason) => { console.log('rejected'); console.log(reason); })
Promise
有三种状态:pending
(进行中)、fulfilled
(已成功)和 rejected
(已失败)
paramTest()
例子有两种情况:
当
number < 5
时,我们认为是成功情况,将状态从pending
变为fulfilled
当
number >= 5
时,我们认为是失败情况,将状态从pending
变为rejected
所以paramTest()
的执行结果:
fulfilled | rejected |
---|---|
resolved | rejected |
number | out of range |
catch的用法
我们继续调用 paramTest
方法举例
paramTest().then((number) => { console.log('resolved'); console.log(number); console.log(data); //data为未定义 },(reason) => { console.log('rejected'); console.log(reason); }).catch((err) => { console.log(err); })
catch
方法其实就是 .then(null, rejection)
的别名,也是用来处理失败失败的回调函数,但是还有一个作用:当 resolve
回调中如果出现错误了,不会堵塞,会执行 catch
中的回调。
all的用法
const p = Promise.all([p1, p2, p3]); p.then(result => { console.log(result); })
all
方法接收一个数组参数,数组中每一项返回的都是Promise
对象,只有当p1, p2, p3
都执行完才会进入then
回调。p1, p2, p3
返回的数据会以一个数组的形式传到then
回调中。
const p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p1'); }, 1000); }) .then(result => result) .catch(e => e); const p2 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p2'); }, 3000); }) .then(result => result) .catch(e => e); Promise.all([p1, p2]) .then(result => console.log(result)) .catch(e => console.log(e)); //3秒后输出['p1', 'p2']
race的用法
const p = Promise.race([p1, p2, p3]); p.then(result => { console.log(result); })
race
的用法与all
如出一辙,不同的是all
方法需要参数的每一项都返回成功了才会执行then
;而race
则是只要参数中的某一项返回成功就执行then
回调。以下是
race
的例子,和all
方法对比,可以看到返回值有很明显的区别。
const p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p1'); }, 1000); }) .then(result => result) .catch(e => e); const p2 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p2'); }, 3000); }) .then(result => result) .catch(e => e); Promise.race([p1, p2]) .then(result => console.log(result)) .catch(e => console.log(e)); //1秒后输出 'p1'
点击这里查看本文中实例源代码
resloader是基于Promise实现的一个图片预加载并展示加载进度的插件,猛戳这里了解详情。如果感觉还可以的话,欢迎star
相关推荐:
使用Promise简化回调
微信小程序Promise简化回调实例分享
jQuery的Promise如何正确使用
以上就是Promise的基本使用方法教程的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的Promise的基本使用方法教程全部内容,希望文章能够帮你解决Promise的基本使用方法教程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。