小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前言
本文作为本人学习总结之用，以笔记为主，同时分享给大家. .
因为个人技术有限，如果有发现错误或存在疑问之处，欢迎指出或指点！不胜感谢！
Promise的理解和使用
Promise是什么?
-
抽象表达:
Promise是JS中进行异步编程的新的解决方案(旧的是什么?)
旧方案是单纯使用回调函数 -
具体表达:
从语法上来说: Promise是一个构造函数
从功能上来说: promise对象用来封装一个异步操作并可以获取其结果 -
promise的状态改变(只有2种, 只能改变一次)
pending变为resolved
pending变为rejected -
promise的基本流程
为什么要用Promise?
1.指定回调函数的方式更加灵活:
可以在请求发出甚至结束后指定回调函数
之前 必须在启动异步任务前指定
promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函 数(甚至可以在异步任务结束后指定/多个)
2. 支持链式调用, 可以解决回调地狱问题
- 什么是回调地狱?
回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件 - 回调地狱的缺点?
不便于阅读 不便于异常处理 - 解决方案?
promise 链式调用 - 终极解决方案?
async/await
如何使用 Promise?
API
-
Promise构造函数: Promise (excutor) {}
excutor函数: 同步执行 (resolve, reject) => {}
resolve函数: 内部定义成功时我们调用的函数 value => {}
reject函数: 内部定义失败时我们调用的函数 reason => {}
说明: excutor会在Promise内部立即同步回调,异步操作在执行器中执行 -
Promise.prototype.then方法: (onResolved, onRejected) => {}
onResolved函数: 成功的回调函数 (value) => {}
onRejected函数: 失败的回调函数 (reason) => {}
说明: 指定用于得到成功value的成功回调和用于得到失败reason的失败回调
返回一个新的promise对象 -
Promise.prototype.catch方法: (onRejected) => {}
onRejected函数: 失败的回调函数 (reason) => {}
说明: then()的语法糖, 相当于: then(undefined, onRejected) -
Promise.resolve方法: (value) => {}
value: 成功的数据或promise对象
说明: 返回一个成功/失败的promise对象 -
Promise.reject方法: (reason) => {}
reason: 失败的原因
说明: 返回一个失败的promise对象 -
Promise.all方法: (promises) => {}
promises: 包含n个promise的数组
说明: 返回一个新的promise, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败 -
Promise.race方法: (promises) => {}
promises: 包含n个promise的数组
说明: 返回一个新的promise, 第一个完成的promise的结果状态就是最终的结果状态
new Promise((resolve, reject) => {
setTimeout(() => {
// resolve('成功的数据')
reject('失败的数据')
}, 1000)
}).then(
value => {
console.log('onResolved()1', value)
}
).catch(
reason => {
console.log('onRejected()1', reason)
}
)
// 产生一个成功值为1的promise对象
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1)
}, 100);
})
const p2 = Promise.resolve(2)
const p3 = Promise.reject(3)
p1.then(value => {console.log(value)})
p2.then(value => {console.log(value)})
p3.catch(reason => {console.log(reason)})
//以上输出 2 3 1
// const pAll = Promise.all([p1, p2, p3])
const pAll = Promise.all([p1, p2])
pAll.then(
values => {
console.log('all onResolved()', values) //[1, 2]
},
reason => {
console.log('all onRejected()', reason)
}
)
const pRace = Promise.race([p1, p2, p3])
pRace.then(
value => {
console.log('race onResolved()', value) // 2
},
reason => {
console.log('race onRejected()', reason)
}
)
