ES6 Promise用法的学习
一、什么是Promise?
Promise是一种异步编程的解决方案,比传统的回调函数更加强大合理。
从语法上来说,Promise是一个对象,可以通过Promise获取异步操作的消息。
Promise 可以支持多并发的请求,获取并发请求中的数据。
注意:Promise 可以解决异步的问题,本身不能说 Promise 是异步的
二、Promise的特点
1. 有all、reject、resolve等方法;
2. 原型上有then、catch等方法;
3. 一旦建立,就无法取消,这是它的缺点;
4. 如果不设置回调函数,Promise 内部抛出的错误,不会反映到外部。
三、Promise的状态
promise 有三种状态:
- pending 初始状态也叫等待状态, 比如定时器没有到时间或者是正在进行网络请求;
- fulfilled 成功状态,主动调用resolve(),且回调.then();
- rejected 失败状态主动调用reject(),且回调.catch();
状态一旦改变,就不会再变。创造 promise实例后,它会立即执行。
四、Promise的用法
1. 基本用法
1 new Promise((resolve, reject) => { 2 setTimeout(() => { 3 // 成功时候调用resolve 4 resolve('Hello Promise!') 5 // 失败时候调用reject 6 reject('Error!!') 7 }, 1000); 8 }).then(data => { // data是resolve里的参数 9 console.log(data); 10 }).catch(error => { // error是reject里的参数 11 console.log(error); 12 })
Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。
2.链式操作的用法
.then()和.catch()操作都能返回一个Promise对象。所以,promise可以链式调用:
new Promise((resolve, reject) => { setTimeout(() => { resolve('链式调用'); }, 1000); }).then(data => { console.log(data); return data + '1'; }).then(data => { console.log(data); return data + '2'; }).then(data => { console.log(data); return Promise.reject(data + 'error') }).catch(data => { console.log(data); }) // 输出: 链式调用 链式调用1 链式调用12 链式调用12error
3. Promise.all 方法
Promise的all方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调。
Promise.all([ new Promise((resolve, reject) => { setTimeout(() => { resolve('事件1'); }, 1000); }), new Promise((resolve, reject) => { setTimeout(() => { resolve('事件2'); }, 5000); }) ]).then(results => { console.log(results); }) // 5s之后打印数组 ["事件1", "事件2"]
有一个场景是很适合用这个的,一些游戏类的素材比较多的应用,打开网页时,预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后,我们再进行页面的初始化。
PS: Promise.all 手撕代码移步:https://www.cnblogs.com/coder-zero/p/14719680.html
参考博文:https://www.cnblogs.com/whybxy/p/7645578.html
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】Flutter适配HarmonyOS 5知识地图,实战解析+高频避坑指南
【推荐】凌霞软件回馈社区,携手博客园推出1Panel与Halo联合终身会员
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步