美文网首页
ES6 promise理解

ES6 promise理解

作者: 老衲不生气 | 来源:发表于2020-06-07 10:31 被阅读0次

    一、promise 是什么

    1、Promise 是 JS 中解决异步编程的一种方案。

    拓展:js中解决异步编程的方案有哪些?优缺点分别是什么?
    )

    简单的说,从语法上Promise 是一个构造函数;从功能上promise 对象用来封装一个异步操作并可以获取其结果

    2、状态

    promise有三种状态,分别是 pending(进行中)、resolved(成功)、rejected(失败)

    promise的状态改变(只有2种, 只能改变一次)

    • pending变为resolved
    • pending变为rejected

    二、为什么用promise

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

    三、 怎样使用promise

    1. 主要API
      Promise构造函数: Promise (excutor) {}

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

    Promise.prototype.then方法: (onResolved, onRejected) => {}

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

    Promise.resolve方法: (value) => {}

    (1) value: 成功的数据或 promise 对象
    说明: 返回一个成功/失败的 promise 对象

    Promise.reject方法: (reason) => {}

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

    Promise.all方法: (promises) => {}

    (1) promises: 包含 n 个 promise 的数组
    说明: 返回一个新的 promise, 只有所有的promise 都成功才成功, 只要有一个失败了就
    直接失败

    Promise.race方法: (promises) => {}

    (1) promises: 包含 n 个 promise 的数组
    说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

    四、拓展 async与await

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

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

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

    五、事件循环

    • 一开始整个脚本作为一个宏任务执行
    • 执行过程中同步代码直接执行,宏任务进入宏任务队列,微任务进入微任务队列
    • 当前宏任务执行完出队,检查微任务列表,有则依次执行,直到全部执行完
    • 执行浏览器UI线程的渲染工作
    • 检查是否有Web Worker任务,有则执行
    • 执行完本轮的宏任务,回到2,依此循环,直到宏任务和微任务队列都为空

    微任务包括:MutationObserver、Promise.then()或catch()、Promise为基础开发的其它技术,比如fetch API、V8的垃圾回收过程、Node独有的process.nextTick。

    宏任务包括:script 、setTimeout、setInterval 、setImmediate 、I/O 、UI rendering。

    相关文章

      网友评论

          本文标题:ES6 promise理解

          本文链接:https://www.haomeiwen.com/subject/gmylzhtx.html