一、Promise是什么?
1. Promise理解
抽象表达:
-
Promise 是一门新的技术(ES6 规范)
-
Promise 是 JS 中进行异步编程的新解决方案
异步编程
-
fs 文件操作
require('fs').readFile('./index.html', (err,data)=>{})
-
数据库操作
-
AJAX
$.get('/server', (data)=>{})
-
定时器
setTimeout(()=>{}, 2000);
-
-
备注:旧方案是单纯使用回调函数
具体表达:
-
从语法上来说: Promise 是一个构造函数
-
从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/ 失败的结果
2. Promise的状态改变
实例对象中的一个属性 『PromiseState』
pending 未决定的
resolved / fullfilled 成功
rejected 失败
-
pending 变为 resolved/fullfilled
-
pending 变为 rejected
-
说明:
- 只有这 2 种, 且一个 promise 对象只能改变一次
- 无论变为成功还是失败, 都会有一个结果数据
- 成功的结果数据一般称为 value, 失败的结果数据一般称为 reason
-
如何改变 promise 的状态
resolve(value)
: 如果当前是 pending 就会变为 resolvedreject(reason)
: 如果当前是 pending 就会变为 rejected- 抛出异常: 如果当前是 pending 就会变为 rejected
3. Promise 对象的值
实例对象中的另一个属性 『PromiseResult』
保存着异步任务『成功/失败』的结果
4. Promise的基本流程
二、为什么使用Promise?
1. 指定回调函数的方式更加灵活
- 旧的: 必须在启动异步任务前指定
- Promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)
2. 支持链式调用, 可以解决回调地狱问题
-
什么是回调地狱?
回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件
-
回调地狱的缺点
- 不便于阅读
- 不便于异常处理
-
解决方案
- promise 链式调用
-
终极解决方案
- async/await
三、Promise的基本使用
1. 基本编码流程
// 1) 创建 promise 对象(pending 状态), 指定执行器函数
const p = new Promise((resolve, reject) => {
// 2) 在执行器函数中启动异步任务
setTimeout(() => {
const time = Date.now()
// 3) 根据结果做不同处理
// 3.1) 如果成功了, 调用 resolve(), 指定成功的 value, 变为 resolved 状态
if (time % 2 === 1) {
resolve('成功的值 ' + time)
} else { // 3.2) 如果失败了, 调用 reject(), 指定失败的 reason, 变为rejected 状态
reject('失败的值' + time)
}
}, 2000)
})
// 4) 能 promise 指定成功或失败的回调函数来获取成功的 vlaue 或失败的 reason
p.then(
value => { // 成功的回调函数 onResolved, 得到成功的 vlaue
console.log('成功的 value: ', value)
},
reason => { // 失败的回调函数 onRejected, 得到失败的 reason
console.log('失败的 reason: ', reason)
}
)
2. promise 封装 ajax 异步请求
/*
可复用的发 ajax 请求的函数: xhr + promise
*/
function promiseAjax(url) {
return new Promise((resolve, reject) => {
// 1. 创建xhr对象
const xhr = new XMLHttpRequest();
// 2. 初始化
xhr.open('GET', url);
// 3. 发送
xhr.send()
// 4. 绑定事件,处理响应结果
xhr.onreadystatechange = function () {
// 判断
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
// 控制台输出响应体
resolve(xhr.response)
} else {
reject(xhr.status)
}
}
}
})
}
promiseAjax('https://api.apiopen.top/api/sentences')
.then(
data => {
console.log('显示成功数据', data)
},
error => {
alert(error.message)
}
)
四、Promise的API
1. Promise 构造函数: Promise (excutor) {}
-
executor
函数: 执行器(resolve, reject) => {}
-
resolve
函数: 内部定义成功时我们调用的函数value => {}
-
reject
函数: 内部定义失败时我们调用的函数reason => {}
-
说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行
-
Promise的同步与异步问题:
new Promise((resolve, reject) => { console.log("resolve before"); resolve("success") }).then(res => console.log(res)) console.log("同步"); // resolve before // 同步 // success
- Promise 本身是同步的(“resolve before” 在"同步"之前先执行),而then()则是异步任务(“success” 在"同步之后再执行")
- 即Promise本身是同步的,而then方法是异步任务
2. Promise.prototype.then 方法: (onResolved, onRejected) => {}
onResolved
函数: 成功的回调函数(value) => {}
onRejected
函数: 失败的回调函数(reason) => {}
- 返回一个新的 promise 对象
- 返回的新 promise 的结果状态由什么决定?
- 简单表达: 由 then()指定的回调函数执行的结果决定
- 详细表达:
- ① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常
- ② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值
- ③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果
- 返回的新 promise 的结果状态由什么决定?
- then方法是异步的
- 说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调
3. Promise.prototype.catch 方法: (onRejected) => {}
在 promise 被拒绝时调用的函数
onRejected
函数: 失败的回调函数(reason) => {}
- promise 异常传透
- 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调
- 前面任何操作出了异常, 都会传到最后失败的回调中处理
- 说明: then()的语法糖, 相当于:
then(undefined, onRejected)
4. Promise.resolve 方法: (value) => {}
- value: 成功的数据或 promise 对象
- 说明: 返回一个成功/失败的 promise 对象
- value为非Promise类型的对象,则返回的结果为成功Promise对象
- value是一个 Promise对象,那么将返回这个 Promise对象
5. Promise.reject 方法: (reason) => {}
- reason: 失败的原因
- 说明: 返回一个失败(带有拒绝原因)的 Promise 对象
- reason是什么则返回的Promise对象的结果(PromiseResult)就是什么
6. Promise.all 方法: (promises) => {}
此方法在集合多个
promise
的返回结果时很有用。
- promises: 包含 n 个 promise 的数组
- 说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就 直接失败
- 如果都成功,返回的结果(PromiseResult)是全部成功结果形成的数组
- 如果存在失败,直接失败,就返回的结果(PromiseResult)是第一个失败结果
7. Promise.race 方法: (promises) => {}
一旦迭代器中的某个 promise 解决或拒绝,返回的 promise 就会解决或拒绝。
- promises: 包含 n 个 promise 的数组
- 说明: 返回一个新的 promise, 第一个完成/失败的 promise 的结果状态就是最终的结果状态
- 即返回的是第一个完成/失败的Promise对象
五、Promise的几个关键问题
1. 一个 promise 指定多个成功/失败回调函数, 都会调用吗?
-
当 promise 改变为对应状态时都会调用
let p = new Promise((resolve, reject) => { resolve('ok') }) // 指定回调1 p.then(value => { console.log(value) }) // 指定回调2 p.then(value => { console.log(value + 1) }) // ok // ok1
2. 改变 promise 状态和指定回调函数谁先谁后?
- 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
- 如何先改状态再指定回调?
- ① 在执行器中直接调用 resolve()/reject()
- ② 延迟更长时间才调用 then()
- 什么时候才能得到数据?
- ① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
- ② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据
let p = new Promise((resolve, reject) => {
// 这里同步先改变状态,再执行.then并指定回调且执行
// resolve('ok')
// 这里异步,先执行.then并指定回调,then的回调是对应时机执行
setTimeout(() => {
resolve('ok')
}, 1000);
})
p.then(
value => {
console.log(value)
},
reason => {
console.log(reason)
}
)
3. promise 如何串连多个操作任务?
- promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用
- 通过 then 的链式调用串连多个同步/异步任务
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok')
}, 1000);
})
p.then(value => {
return new Promise((resolve, reject) => {
resolve('success')
// reject('err')
})
}).then(value => {
console.log(value)
return 123
}).then(value => {
console.log(value)
throw 'err'
}).then(() => {}, reason => {
console.log(reason)
})
4. 中断 promise 链
- 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
- 办法: 在回调函数中返回一个 pendding 状态的 promise 对象
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok')
}, 100);
})
p.then(value => {
// 中断Promise链条有且仅有一个方式:返回一个pending状态的Promise对象
console.log(111)
}).then(value => {
return new Promise(() => {})
console.log(222)
}).then(value => {
console.log(333)
}).catch(reason => {
console.warn(reason)
})