资讯专栏INFORMATION COLUMN

ES6中的Promise的学习笔记

stefanieliang / 559人阅读

摘要:意味着操作成功完成。当调用方法的时候会设置一个状态,调用方法的时候会设置一个状态。返回是自定义的,状态由自己设但不能不给状态,不然不会执行下一个链详细文档文档

背景:在一个方法中处理一个复杂的异步操作时会涉及到多个异步处理,它们可能是层层嵌套导致这个方法异常的庞大,影响日后的代码维护和问题的查找

解决:在ES6中提供了一个Promise的对象,它以一种链式的写法将异步操作逻辑与异步返回结果的处理逻辑分离,让代码更加有可读性

原理:promise提供了三种状态,通过状态与then函数中指定的处理函数关联,当promise处于fullfilled状态的时候就会调用对应处理成功的函数,处于rejected状态的时候就会调用then提供的失败的处理函数

相关知识

语法:new Promise( function(resolve, reject) {...} /* executor */ );

Promise中提供了一个暂时称为executor的匿名回调函数,在创建Promise对象的时候会立即调用这个回调方法并传递两个由Promise提供的接口函数resolve和reject。那么什么时候去调用这两个函数呢? 从语义上来理解来说resolve表示异步操作成功时的处理而reject表示异步操作失败时的处理。在这个匿名函数中我们只需要编写异步执行的代码逻辑而具体的异步返回的处理放到别处,这时候resolve和reject更像是两个占位符,调用他们分别在执行成功的地方用resolve占一个位置,在失败的地方用reject占一个位置,promise会根据各自的状态执行各自所关联的结果处理函数

状态:

pending: 初始状态,既不是成功,也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。
当调用resolve方法的时候会设置一个fulfilled状态,调用rejected方法的时候会设置一个rejected状态。只要promise处于这两种状态的一种它就会调用通过then方法添加相应处理函数,如果是pending状态你需要先设置另外两种中的一种才会调用对应then方法中的处理函数

链式:图中所示的方法都会创建一个新的promise对象以达到链式调用的目的

原型方法

then方法:Promise.prototype.then(onFulfilled, onRejected)

这个then方法很有意思,它提供上面所说的异步返回结果的处理逻辑,它会将处理逻辑与promise对象的状态关联。从上面看有两个on前缀的变量,它们可以是函数也可以是字符串。如果是字符串它会将上个链传递的状态和值传递到下一个链;如果onFulfilled/onRejected)是函数,那么函数返回值可以是一个自己创建的promise对象也可以是一个字符串还可以是没有返回值,then方法会对这些返回值做解析并返回一个新的promise(返回字符串和什么都不返回的情况,then新建的promise对象的状态是fulfilled。返回是自定义的promise,状态由自己设但不能不给状态,不然不会执行下一个链)

详细文档
Promise文档

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95124.html

相关文章

  • JS笔记

    摘要:从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。异步编程入门的全称是前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章,涉及到优化等多个方面。 TypeScript 入门教程 从 JavaScript 程序员的角度总结思考,循序渐进的理解 TypeScript。 网络基础知识之 HTTP 协议 详细介绍 HTT...

    rottengeek 评论0 收藏0
  • ES6学习笔记(四)--------------------------------------pr

    摘要:首先是一个构造器函数,使用它必须通过一个实例出来,并且出来的实例晕有一个内置的参数,这个参数是一个函数,这个参数拥有自己内置的两个参数,和,并且这两个参数也是两个函数异步操作成功上面这个就是一个最简单的对象属于的一个方法,里面的两个参数属于 首先promise是一个构造器函数,使用它必须通过new一个实例出来,并且new出来的实例晕有一个内置的参数,这个参数是一个函数,这个参数拥有自己...

    zhaofeihao 评论0 收藏0
  • ES6学习笔记(四)--------------------------------------pr

    摘要:首先是一个构造器函数,使用它必须通过一个实例出来,并且出来的实例晕有一个内置的参数,这个参数是一个函数,这个参数拥有自己内置的两个参数,和,并且这两个参数也是两个函数异步操作成功上面这个就是一个最简单的对象属于的一个方法,里面的两个参数属于 首先promise是一个构造器函数,使用它必须通过new一个实例出来,并且new出来的实例晕有一个内置的参数,这个参数是一个函数,这个参数拥有自己...

    Jochen 评论0 收藏0
  • ES6学习笔记Promise

    摘要:上代码异步执行成功的构造函数接收一个函数参数,并传入两个参数,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。第一个回调函数是对象的状态变为时调用,第二个回调函数是对象的状态变为时调用。 这篇文章只解决三个问题。什么是promise? promise有什么用?promise怎么用? 1.什么是promise? 对于ES6来说,就是一个构造函数,可以用new Prom...

    zoomdong 评论0 收藏0
  • web前端学习笔记(1)

    摘要:而且状态一旦改变,就无法再次改变。这是因为立即的是在本轮事件循环的末尾执行,总是晚于本轮循环的同步任务。返回布尔值,表示参数字符串是否在原字符串的头部。用于头部补全,用于尾部补全。 9月5日 array.push(...newArray) // 往数组插入数组 // 交换a和b的值 // ES6写法 var a = 1, b = 2; [a, b] = [b, a]; cons...

    Luosunce 评论0 收藏0

发表评论

0条评论

stefanieliang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<