带你了解Promise的各种使用方式及其原理"/>
Promise基础详解,快速带你了解Promise的各种使用方式及其原理
一、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, 得到成功的 vlaueconsole.log('成功的 value: ', value)},reason => { // 失败的回调函数 onRejected, 得到失败的 reasonconsole.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('/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)})
更多推荐
Promise基础详解,快速带你了解Promise的各种使用方式及其原理
发布评论