胖蔡叨叨叨
你听我说

Promise入门

预备知识

函数对象与实例对象

  • 函数对象: 将函数作为对象使用时, 简称为函数对象
  • 实例对象: new 函数产生的对象, 简称为对象


回调函数的分类


1、同步回调
理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中
例子: 数组遍历相关的回调函数 / Promise的excutor函数
2、异步回调
理解: 不会立即执行, 会放入回调队列中将来执行
例子: 定时器回调 / ajax回调 / Promise的成功|失败的回调

错误


1. 错误对象
        name属性: 错误类型
        message属性: 错误相关信息
2. 错误的类型
        EvalError: 已在 eval() 函数中发生的错误 (更新版本的 JavaScript 不会抛出任何 EvalError, SyntaxError)
        ReferenceError: 引用的变量不存在
        TypeError: 数据类型不正确的错误
        RangeError: 数据值不在其所允许的范围内
        SyntaxError: 语法错误
URIError:在 encodeURI() 中已发生的错误
3. 错误处理
        捕获错误: try … catch
        抛出错误: throw error

Promise 的理解和使用

  • Promise 是什么
  • Promise 的理解

抽象表达:Promise 是 JS 中进行异步编程的新的解决方案
具体表达:
语法上:Promise 是一个构造函数
功能上:Promise 对象用来封装一个异步操作并可以获取其结果

  • Promise 的状态改变

pending 变为 resolved
pending 变为 rejected
只有这两种,且一个 promise 对象只能改变一次。无论成功还是失败,都会有一个结果数据。成功的结果数据一般称为 value,而失败的一般称为 reason。

  • Promise 的基本流程
  • Promise 的基本使用
new Promise((resolve, reject) => {
  resolve(1)
  //  reject(2)
}).then(value => {
  console.log('value', value)
}, reason => {
  console.log('reason1', reason)
}).catch(reason => {
  console.log('reason2', reason)
})

为什么要用 Promise

  • 指定回调函数的方式更加灵活

旧的:必须在启动异步任务前指定
promise:启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定)

  • 支持链式调用,可以解决回调地狱问题

什么是回调地狱?
回调函数嵌套调用,外部回调函数异步执行的结果是其内部嵌套的回调函数执行的条件
回调地狱的缺点?
不便于阅读 / 不便于异常处理
解决方案
promise 链式调用
终极解决方案
async/await

如何使用 Promise

Promise中的API

  • Promise 构造函数:Promise(excutor) {}

excutor 函数:同步执行 (resolve, reject) => {}
resolve 函数:内部定义成功时调用的函数 resove(value)
reject 函数:内部定义失败时调用的函数 reject(reason)
说明:excutor 是执行器,会在 Promise 内部立即同步回调,异步操作 resolve/reject 就在 excutor 中执行

  • Promise.prototype.then 方法:p.then(onResolved, onRejected)

1)onResolved 函数:成功的回调函数 (value) => {}
2)onRejected 函数:失败的回调函数 (reason) => {}
说明:指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调,返回一个新的 promise 对象

  • Promise.prototype.catch 方法:p.catch(onRejected)

onRejected 函数:失败的回调函数 (reason) => {}
说明:then() 的语法糖,相当于 then(undefined, onRejected)

  • Promise.resolve 方法:Promise.resolve(value)

value:将被 Promise 对象解析的参数,也可以是一个成功或失败的 Promise 对象
返回:返回一个带着给定值解析过的 Promise 对象,如果参数本身就是一个 Promise 对象,则直接返回这个 Promise 对象。

  • Promise.reject 方法:Promise.resolve(reason)

reason:失败的原因
说明:返回一个失败的 promise 对象

  • Promise.all 方法:Promise.all(iterable)

iterable:包含 n 个 promise 的可迭代对象,如 Array 或 String
说明:返回一个新的 promise,只有所有的 promise 都成功才成功,只要有一个失败了就直接失败。

  • Promise.race方法:Promise.race(iterable)

iterable:包含 n 个 promise 的可迭代对象,如 Array 或 String
说明:返回一个新的 promise,第一个完成的 promise 的结果状态就是最终的结果状态。

Promise 的几个关键问题

如何改变 promise 的状态

  • resolve(value):如果当前是 pending 就会变为 resolved
  • reject(reason):如果当前是 pending 就会变为 rejected
  • 抛出异常:如果当前是 pending 就会变为 rejected

一个 promise 指定多个成功/失败回调函数,都会调用吗?

当 promise 改变为对应状态时都会调用。

改变 promise 状态和指定回调函数谁先谁后?

  • 都有可能,常规是先指定回调再改变状态,但也可以先改状态再指定回调
  • 如何先改状态再指定回调?
    1. 在执行器中直接调用 resolve()/reject()
    2. 延迟更长时间才调用 then()
  • 什么时候才能得到数据?
    1. 如果先指定的回调,那当状态发生改变时,回调函数就会调用得到数据
    2. 如果先改变的状态,那当指定回调时,回调函数就会调用得到数据

promise.then() 返回的新 promise 的结果状态由什么决定?

  • 简单表达:由 then() 指定的回调函数执行的结果决定
  • 详细表达:
    ​ ① 如果抛出异常,新 promise 变为 rejected,reason 为抛出的异常
    ​ ② 如果返回的是非 promise 的任意值,新 promise 变为 resolved,value 为返回的值。
    ​ ③ 如果返回的是另一个新 promise,此 promise 的结果就会成为新 promise 的结果。

promise 如何串联多个操作任务?

  • promise 的 then() 返回一个新的 promise,可以并成 then() 的链式调用。
  • 通过 then 的链式调用串联多个同步/异步任务。

Promise 异常穿透(传透)?

  • 当使用 promise 的 then 链式调用时,可以在最后指定失败的回调。
  • 前面任何操作出了异常,都会传到最后失败的回调中处理。

中断 promise 链?

当使用 promise 的 then 链式调用时,在中间中断,不再调用后面的回调函数
办法:在回调函数中返回一个 pending 状态的 promise 对象

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » Promise入门
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏