Promise浅理解

cdShow小太阳

已于 2024-03-08 15:07:36 修改

阅读量234

点赞数

文章标签： js es6 promise

于 2021-03-20 17:12:36 首次发布

本文链接：https://blog.csdn.net/cdx1170776994/article/details/115030983

版权

1. 准备

1.1. 函数对象与实例对象

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

function Fn() {   // Fn函数 
}
const fn = new Fn() // Fn是构造函数  fn是实例对象(简称为对象)
console.log(Fn.prototype) // Fn是函数对象
Fn.call({}) // Fn是函数对象
$('#test') // jQuery函数
$.get('/test') // jQuery函数对象

1.2. 回调函数的分类

1. 同步回调:
理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中
例子: 数组遍历相关的回调函数 / Promise的excutor函数

// 1. 同步回调函数
// const arr = [1, 3, 5]
arr.forEach(item => { // 遍历回调, 同步回调函数, 不会放入列队, 一上来就要执行完
 console.log(item)
})
console.log('forEach()之后')

2. 异步回调:
理解: 不会立即执行, 会放入回调队列中将来执行
例子: 定时器回调 / ajax回调 / Promise的成功|失败的回调

// 2. 异步回调函数
setTimeout(() => { // 异步回调函数, 会放入队列中将来执行
   console.log('timout callback()')
}, 0)
console.log('setTimeout()之后')

1.3. JS中的Error

1. 错误的类型
Error: 所有错误的父类型
ReferenceError: 引用的变量不存在
TypeError: 数据类型不正确的错误
RangeError: 数据值不在其所允许的范围内
SyntaxError: 语法错误
2. 错误处理
捕获错误: try ... catch

try {
    let d
    console.log(d.xxx)
} catch (error) {
    console.log(error.message)
    console.log(error.stack)
}
console.log('出错之后')

抛出错误: throw error

// 抛出错误: throw error
  function something() {
    if (Date.now()%2===1) {
      console.log('当前时间为奇数, 可以执行任务')
    } else { // 如果时间是偶数抛出异常, 由调用来处理
      throw new Error('当前时间为偶数无法执行任务')  
    }
  }

  // 捕获处理异常
  try {
    something()
  } catch (error) {
    alert(error.message)
  }

3. 错误对象
message属性: 错误相关信息
stack属性: 函数调用栈记录信息

2. Promise的理解和使用

2.1. Promise是什么?

1.抽象表达:
Promise是JS中进行异步编程的新的解决方案(旧的是谁?)
2.具体表达:
从语法上来说: Promise是一个构造函数
从功能上来说: promise对象用来封装一个异步操作并可以获取其结果
3. promise的状态改变(只有2种, 只能改变一次)
pending变为resolved
pending变为rejected
4. promise的基本流

// 1. 创建一个新的promise对象
    const p = new Promise((resolve, reject) => {// 执行器函数  同步回调
      console.log('执行 excutor')
      // 2. 执行异步操作任务
      setTimeout(() => {
        const time = Date.now() // 如果当前时间是偶数就代表成功, 否则代表失败
        // 3.1. 如果成功了, 调用resolve(value)
        if (time %2 == 0) {
          resolve('成功的数据, time=' + time)
        } else {
        // 3.2. 如果失败了, 调用reject(reason)
          reject('失败的数据, time=' + time)
        }
      }, 1000);
      
    })
    console.log('new Promise()之后')

      p.then(
      value => { // 接收得到成功的value数据    onResolved
        console.log('成功的回调', value)  
      },
      reason => {// 接收得到失败的reason数据  onRejected
        console.log('失败的回调', reason)
      }

2.2. 为什么要用Promise?

1. 指定回调函数的方式更加灵活: 可以在请求发出甚至结束后指定回调函数
2. 支持链式调用, 可以解决回调地狱问题

2.3. 如何使用Promise?

2.3.1. 主要API

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

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

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

4. Promise.resolve方法: (value) => {}
value: 成功的数据或promise对象
说明: 返回一个成功/失败的promise对象

5. Promise.reject方法: (reason) => {}
reason: 失败的原因
说明: 返回一个失败的promise对象

6. Promise.all方法: (promises) => {}
promises: 包含n个promise的数组
说明: 返回一个新的promise, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败
7. Promise.race方法: (promises) => {}
promises: 包含n个promise的数组
说明: 返回一个新的promise, 第一个完成的promise的结果状态就是最终的结果状态

2.3.2. 几个重要问题

·1. 如何改变promise的状态?
(1)resolve(value): 如果当前是pendding就会变为resolved
(2)reject(reason): 如果当前是pendding就会变为rejected
(3)抛出异常: 如果当前是pendding就会变为rejected

2. 一个promise指定多个成功/失败回调函数, 都会调用吗?
当promise改变为对应状态时都会调用

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

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

5.promise如何串连多个操作任务?
(1)promise的then()返回一个新的promise, 可以开成then()的链式调用
(2)通过then的链式调用串连多个同步/异步任务

6.promise异常传/穿透?
(1)当使用promise的then链式调用时, 可以在最后指定失败的回调,
(2)前面任何操作出了异常, 都会传到最后失败的回调中处理

7.中断promise链?
(1)当使用promise的then链式调用时, 在中间中断, 不再调用后面的回调函数
(2)办法: 在回调函数中返回一个pendding状态的promise对象

3. 自定义Promise（待更新完善）

1. 定义整体结构
2. Promise构造函数的实现
3. promise.then()/catch()的实现
4. Promise.resolve()/reject()的实现
5. Promise.all/race()的实现
6. Promise.resolveDelay()/rejectDelay()的实现
7. ES6 class版本

4. async与await

1. async 函数
函数的返回值为promise对象
promise对象的结果由async函数执行的返回值决定

2. await 表达式
await右侧的表达式一般为promise对象, 但也可以是其它的值
如果表达式是promise对象, await返回的是promise成功的值
如果表达式是其它值, 直接将此值作为await的返回值

3. 注意:
await必须写在async函数中, 但async函数中可以没有await
如果await的promise失败了, 就会抛出异常, 需要通过try...catch来捕获处理

5. JS异步之宏队列与微队

   1. 宏列队: 用来保存待执行的宏任务(回调), 比如: 定时器回调/DOM事件回调/ajax回调
   2. 微列队: 用来保存待执行的微任务(回调), 比如: promise的回调/MutationObserver的回调
   3. JS执行时会区别这2个队列
       JS引擎首先必须先执行所有的初始化同步任务代码
       每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行

setTimeout(() => { // 会立即放入宏列队
      console.log('timeout callback1()')
      Promise.resolve(3).then(
        value => { // 会立即放入微列队
          console.log('Promise onResolved3()', value)
        }
      )
    }, 0)
    setTimeout(() => { // 会立即放入宏列队
      console.log('timeout callback2()')
    }, 0)
    Promise.resolve(1).then(
      value => { // 会立即放入微列队
        console.log('Promise onResolved1()', value)
      }
    ) 
    Promise.resolve(2).then(
      value => { // 会立即放入微列队
        console.log('Promise onResolved2()', value)
      }
    )