美文网首页
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。

相关文章

  • Promise对象原理解析

    Promise对象原理解析 ES6 原生提供了 Promise 对象。所谓 Promise,就是一个对象,用来传递...

  • Promise的理解和使用

    Promise是什么? 理解 1. 抽象表达 Promise是一门新的技术(ES6规范) Promise是JS中进...

  • 全局 Promise 异常捕捉

    《深入理解ES6》阅读随笔 在 ES6 的 Promise 中,对于直接 reject 的异常未处理任务,不会进行...

  • ES6 中的 Promise(三)

    《深入理解ES6》阅读随笔 响应多个 Promise 在 Promise 中还有两个静态方法,可以用来控制响应多个...

  • ES6--Promise

    学过ES6的同学大概都知道Promise,可想而知Promise在ES6中很重要。 Promise对象代表了未来将...

  • 理解【ES6】Promise

    什么是Promise Promise是异步编程的一种解决方案,比传统的异步解决方案【回调函数】和【事件】更合理、更...

  • ES6:理解Promise

    1、Promise 在Promise以前,在需要多个异步操作的时候,会导致多个回调函数嵌套,导致代码不够直观,就是...

  • ES6 promise理解

    一、promise 是什么 1、Promise 是 JS 中解决异步编程的一种方案。 拓展:js中解决异步编程的...

  • es6解读5:promise

    Promise作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念...

  • 解析Promise

    Promise作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念...

网友评论

      本文标题:ES6 promise理解

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