Promise从入门到深入
1. 准备
1.1. 函数对象与实例对象
1. 函数对象: 将函数作为对象使用时, 简称为函数对象
2. 实例对象: new 函数产生的对象, 简称为对象
1.2. 回调函数的分类
1. 同步回调:
理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中
例子: 数组遍历相关的回调函数 / Promise的excutor函数
2. 异步回调:
理解: 不会立即执行, 会放入回调队列中将来执行
例子: 定时器回调 / ajax回调 / Promise的成功|失败的回调
1.3. JS中的Error
1. 错误的类型
Error: 所有错误的父类型
ReferenceError: 引用的变量不存在
TypeError: 数据类型不正确的错误
RangeError: 数据值不在其所允许的范围内
SyntaxError: 语法错误
2. 错误处理
捕获错误: try ... catch
抛出错误: throw error
3. 错误对象
message属性: 错误相关信息
stack属性: 函数调用栈记录信息
2. Promise的理解和使用
2.1. Promise是什么?
1.抽象表达:
Promise是一门新的技术(ES6规范)
Promise是JS中进行异步编程的新解决方案(旧的是谁?)
2.具体表达:
从语法上来说: Promise是一个构造函数
从功能上来说: promise对象用来封装一个异步操作并可以获取其成功/失败的结果值
3. promise的状态改变(只有2种, 只能改变一次)
pending变为resolved
pending变为rejected
4. promise的基本流程
2.2. 为什么要用Promise?
1. 指定回调函数的方式更加灵活: 可以在请求发出甚至结束后指定回调函数
2. 支持链式调用, 可以解决回调地狱问题
2.3. 如何使用Promise?
1. 主要API
Promise构造函数: Promise (excutor) {}
Promise.prototype.then方法: (onResolved, onRejected) => {}
Promise.prototype.catch方法: (onRejected) => {}
Promise.resolve方法: (value) => {}
Promise.reject方法: (reason) => {}
Promise.all方法: (promises) => {}
Promise.race方法: (promises) => {}
2. 几个重要问题
如何改变promise的状态?
(1)resolve(value): 如果当前是pendding就会变为resolved
(2)reject(reason): 如果当前是pendding就会变为rejected
(3)抛出异常: 如果当前是pendding就会变为rejected
一个promise指定多个成功/失败回调函数, 都会调用吗?
当promise改变为对应状态时都会调用
promise.then()返回的新promise的结果状态由什么决定?
(1)简单表达: 由then()指定的回调函数执行的结果决定
(2)详细表达:
①如果抛出异常, 新promise变为rejected, reason为抛出的异常
②如果返回的是非promise的任意值, 新promise变为resolved, value为返回的值
③如果返回的是另一个新promise, 此promise的结果就会成为新promise的结果
改变promise状态和指定回调函数谁先谁后?
(1)都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
(2)如何先改状态再指定回调?
①在执行器中直接调用resolve()/reject()
②延迟更长时间才调用then()
(3)什么时候才能得到数据?
①如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
②如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据
promise如何串连多个操作任务?
(1)promise的then()返回一个新的promise, 可以开成then()的链式调用
(2)通过then的链式调用串连多个同步/异步任务,同步任务直接写,异步任务需要封装到返回的promise对象中
例如
new Promise((resolve, reject) => {
// 启动任务1(异步)
console.log(‘启动任务1(异步)’)
setTimeout(() => {
resolve(1)
}, 1000)
}).then(value => {
console.log(‘任务1成功的value为’, value)
// 执行任务2(同步)
console.log(‘执行任务2(同步)’)
return 2
}).then(value => {
console.log(‘任务2成功的vlaue为’, value)
// 执行任务3(异步)
return new Promise((resolve, reject) => {
console.log(‘调动任务3(异步)’)
setTimeout(() => {
resolve(3)
}, 1000);
})
}).then(value => {
console.log('任务3成功的value为: ', value)
})
promise错误穿透?
(1)当使用promise的then链式调用时, 可以在最后指定失败的回调,
(2)前面任何操作出了错误, 都会传到最后失败的回调中处理
中断promise链
能错误穿透的原因:当.then()中没有写onrejected的回调函数时,会默认增加,reason => {throw reason},
补充:.catch()默认onresolved的回调函数是 value=>value
中断promise链
(1)当使用promise的then链式调用时, 在中间中断, 不再调用后面的回调函数
(2)办法: 在回调函数中返回一个pendding状态的promise对象