Promise是什么
1.1 理解
1.抽象表达:
1)promise是一门新的技术(ES6语言规范)
2)promise是js进行异步编程的新解决方案
旧方案是单纯使用回调函数
2.具体表达
1)从语法上来说Promise是一个构造函数,
2) 从功能上来说:promise对象用来封装一个异步操作并可以获取成果 失败的结果值
异步编程:fs文件炒作, 数据库操作,AJAX,定时器
2.2为什么要用Promise
2.2.1指定回调函数的方法更加灵活
1)旧的:必须在指定任务前指定
2)promise:启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数。
2.2.2 支持链式调用可以解决回调地狱问题 1)什么是回调地狱? 回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调函数执行的条件
2)回调地狱的缺点? 不便于阅读 / 不便于异常处理 解决方案? promise 链式调用 终极解决方案? async/await
promise的状态:
pending: 未定义的
1.3. 如何使用 Promise?1.3.1. API
-
Promise 构造函数: Promise (excutor) {}(1) executor 函数: 执行器 (resolve, reject) => {}(2) resolve 函数: 内部定义成功时我们调用的函数 value => {}(3) reject 函数: 内部定义失败时我们调用的函数 reason => {}说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行
-
Promise.prototype.then 方法: (onResolved, onRejected) => {}(1) onResolved 函数: 成功的回调函数 (value) => {}(2) onRejected 函数: 失败的回调函数 (reason) => {}说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调返回一个新的 promise 对象
-
Promise.prototype.catch 方法: (onRejected) => {}(1) onRejected 函数: 失败的回调函数 (reason) => {}
-
Promise.resolve 方法: (value) => {}(1) value: 成功的数据或 promise 对象说明: 返回一个成功/失败的 promise 对象
1.1如果传入为非promise对象 返回的结果为成功的promise对象
let p2 = Promise.resolve(521) console.log(p2);
1.2如果传入为一个promise对象 ,则参数的结果决定了 resolve的结果
let p3 = Promise.resolve(new Promise((resolve, reject) => { // resolve('p3成功') reject('p3失败') })) console.log(p3); //rejected
-
Promise.reject 方法: (reason) => {}(1) reason: 失败的原因说明: 无论传入的是一个promise对象或者不是返回的都是一个失败的 promise 对象
//返回一个失败的 promise 对象 const p4 = Promise.reject(520) console.log(p4);//rejected const p5 = Promise.reject(new Promise((resolve,reject)=>{ resolve('p5成功') // reject('p5失败') })) console.log(p5); //rejected
-
Promise.all 方法: (promises) => {}(1) promises: 包含 n 个 promise 的数组说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败
const p6 = new Promise((resolve,reject)=>{ resolve('p6成功') }) const p7 = Promise.resolve('hello cui') const p8 = Promise.resolve('hello chen') const result = Promise.all([p6,p7,p8]) console.log(result); //fulfilled
-
Promise.race 方法: (promises) => {}(1) promises: 包含 n 个 promise 的数组说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态
const p9 = new Promise((resolve,reject)=>{ resolve('p9成功') }) const p10 = Promise.resolve('zhi') const p11 = Promise.resolve('zhii') const race = Promise.race([p9,p10,p11]) console.log(race); //fulfilled
1.3.2. promise 的几个关键问题
-
如何改变 promise 的状态?(1) resolve(value): 如果当前是 pending 就会变为 resolved(2) reject(reason): 如果当前是 pending 就会变为 rejected(3) 抛出异常: 如果当前是 pending 就会变为 rejected
-
一个 promise 指定多个成功/失败回调函数, 都会调用吗?当 promise 改变为对应状态时都会调用
-
改变 promise 状态和指定回调函数谁先谁后?(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调(2) 如何先改状态再指定回调?① 在执行器中直接调用 resolve()/reject()② 延迟更长时间才调用 then()(3) 什么时候才能得到数据?① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据
-
promise.then()返回的新 promise 的结果状态由什么决定?(1) 简单表达: 由 then()指定的回调函数执行的结果决定(2) 详细表达:① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常
const p12 = new Promise((resolve,reject)=>{ resolve('okkk') }) const esc = p12.then((value)=>{ throw '有个问题' },(reason)=>{ }) console.log(esc)// rejected
② 如果返回的是非promise的任意值, 新promise变为resolved, value为返回的值
const p13 = new Promise((resolve,reject)=>{ resolve('okkk') }) const number = p13.then((value)=>{ return 521 },(reason)=>{ }) console.log(number)// fulfilled
③ 如果返回的是另一个新promise, 此promise的结果就会成为新promise的结果
const p14 = new Promise((resolve,reject)=>{ resolve('okkk') }) const obj = p14.then((value)=>{ return new Promise((resolve,reject)=>{ // resolve('obj成功') reject('obj失败') }) },(reason)=>{ }) console.log(obj)// rejected
-
promise 如何串连多个操作任务?(1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用(2) 通过 then 的链式调用串连多个同步/异步任务
const p15 = new Promise((resolve, reject) => { resolve('p15成功') }) p15.then(value => { return new Promise((resolve, reject) => { resolve('sucess') }) }).then(value => { console.log(value); //sucess }).then(value => { console.log(value); // undefind 因为前面的then没有return ,就是return undefined })
-
promise 异常传透?(1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,(2) 前面任何操作出了异常, 都会传到最后失败的回调中处理
const p16 = new Promise((resolve,reject)=>{ reject('p16成功') }) p16.then(value => { console.log(111); }).then(value => { console.log(222); }).then(value => { console.log(333); }).catch(reason =>{ console.warn(reason); })
-
中断 promise 链?(1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数(2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象
const p17 = new Promise((resolve,reject)=>{ // reject('p16失败') resolve('p17成功') }) p16.then(value => { console.log(111111); return new Promise(()=>{}) }).then(value => { console.log(222222); }).then(value => { console.log(333333); }).catch(reason =>{ console.warn(reason); })
promise的状态只能改变一次
-
3.2. async 函数
-
函数的返回值为 promise 对象
-
promise 对象的结果由 async 函数执行的返回值决定
-
3.3. await 表达式
-
await 右侧的表达式一般为 promise 对象, 但也可以是其它的值
-
如果表达式是 promise 对象, await 返回的是 promise 成功的值
-
如果表达式是其它值, 直接将此值作为 await 的返回值
-
3.4. 注意
-
await 必须写在 async 函数中, 但 async 函数中可以没有 await
-
如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理