资讯专栏INFORMATION COLUMN

[ ES6 ] 进阶篇(一) —— Promise

Charlie_Jade / 2068人阅读

摘要:是异步编程的一种解决方案,比传统的解决方案回调函数和事件更合理和更强大。履行意味着操作成功完成。如果不设置回调函数,内部抛出的错误,不会反应到外部当处于状态时,无法得知目前进展到哪一个阶段刚刚开始还是即将完成。

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。

什么是 Promise

从使用上来说是一种语法糖,会了以后写东西简单一些
Promise 翻译过来就是 承诺 诺言 约定 答应 的意思
那么我是不是可以理解为它答应我会去做某件事,或者约好了会做某事
注:示例代码部分使用 jquery 示例

特点

对象的状态不受外界影响

promise 有三个状态:待定(pending),履行(fulfilled),拒绝(rejected)。只有返回的结果可以影响状态,其他任何操作不会影响到这个状态。

//待定:初始状态,既未履行也未拒绝。
//履行:意味着操作成功完成。
//拒绝:意味着操作失败。

就像约会,说好了要约会,遵守了约定,有其他原因拒绝了约定。只有约会这件事中的彼此才能决定是遵守还是拒绝,其他人是决定不了的。

状态只会改变一次

Promise对象的状态改变,只有两种可能:成功(fulfilled)和失败(rejected);只要改变了就会一直是这个结果。

还是约会,到了约会的时间之后结果就是肯定的了。别人第二天问起昨天约会去了吗?也只会回答去了;或者没去。是不可能说第一次回答去了,第二次回答没去,第三次回答去了又没去。

新建 promise 就会立即执行,无法中途取消。

如果不设置回调函数,Promise内部抛出的错误,不会反应到外部

当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

参数

Promise有两个参数名需要传递 resolve 和 reject ;分别用来返回成功和失败,他们是两个函数,只需要最后调用一下就行,不用自己去做操作

const promise = new Promise((resolve, reject) => {//约会定在下午2点
  // 为约会做准备

  if (/*到时间了*/){
    resolve(value);//都来了 遵守了约定
  } else {
    reject(error);//有事来不了了 拒绝了约定
  }
});
方法 Promise 原型方法
//原型方法使用方法
Promise.prototype.then();
//实际用的时候直接在 Promise 对象后使用方法的即可
let p = new Promise();
P.then();
then() //之后

它的参数是回调函数,可以有两个
第一个必填,表示成功了会执行的操作;第二个可以不填,表示失败了会执行的操作(推荐至少有一个接收错误的方法被调用)

const promise = new Promise((resolve, reject) => {//约会定在下午2点;新建 Promise 对象
  // 为约会做准备;请求数据

  if (/*到时间了*/){
    resolve(value);//都来了 遵守了约定;返回成功后的值
  } else {
    reject(error);//有事来不了了 拒绝了约定;返回失败的原因
  }
});
promise.then( value => {
  //遵守了约定,两个人可以一起做点什么;数据操作
}, error => {
  //拒绝了约定,自己一个人做点什么;显示错误信息或者重试
});
catch() //捕获

它的参数是一个回调函数,表示失败了会执行的操作(推荐使用 catch() 接收错误)

promise.catch( error => {
  //显示错误信息或者重试
});
finally() //最后

它的参数是一个回调函数,表示不管是履行了约定还是拒绝了约定 最后都会执行的操作

promise.finally( () => {
  //执行完 Promise 后执行的操作
});
Promise 对象方法
//直接使用 Promise 关键字就可以调用方法
Promise.all();
all()

参数是 Promise 对象数组或者数组元素返回的都是 Promise 对象
当所有的 Promise 对象全都返回成功时,才会将所有成功的返回值传递给 then()
有一个返回失败就会直接结束当前 Promise ,并将第一个失败的返回值传递给 cath()

假如说有一系列数据要获取这时就可以用 Promise.all()

//获取 直接用 $.ajax() 是因为 $.ajax() 实际上返回的是 Promise 对象
Promise.all([
    $.ajax({url:"api/userInfo"}),
    $.ajax({url:"api/banner"}),
    $.ajax({url:"api/imagesUrl"})
]).then(arr=>{//全部成功才会调用
    let [userInfo1,userInfo2,userInfo3] = arr;
    console.log(userInfo1,userInfo2,userInfo3);
}).catch(err=>{//有一个失败就终止并调用
    console.log(err);
});
reace()

参数是 Promise 对象数组或者数组元素返回的都是 Promise 对象
只要有一个返回了状态不论是成功或失败都会将值传递给 then()

这篇文章主要是自己用来快速查阅 Promise 相关语法的,对于看文档困难的不推荐看

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

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

相关文章

  • 前端进阶资源整理

    摘要:前端进阶进阶构建项目一配置最佳实践状态管理之痛点分析与改良开发中所谓状态浅析从时间旅行的乌托邦,看状态管理的设计误区使用更好地处理数据爱彼迎房源详情页中的性能优化从零开始,在中构建时间旅行式调试用轻松管理复杂状态如何把业务逻辑这个故事讲好和 前端进阶 webpack webpack进阶构建项目(一) Webpack 4 配置最佳实践 react Redux状态管理之痛点、分析与...

    BlackMass 评论0 收藏0
  • ES6入门到进阶(二):循环、数组、对象

    摘要:优点按需加载可以写中路径也可以动态加以后默认就是严格模式,默认严格模式完参考视频资料经典入门到进阶 上一篇:ES6入门到进阶(一):let、解构赋值、字符串模板、函数 一、循环 ES5里面新增一些东西 1.1 arr.forEach()(常用) 1. for for(let i=0; i [{t:aaaa}] let arr = [ ...

    JerryZou 评论0 收藏0
  • ES6-7

    摘要:的翻译文档由的维护很多人说,阮老师已经有一本关于的书了入门,觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中,显得越来越重要。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

    mudiyouyou 评论0 收藏0
  • 前端进阶系列-目录

    摘要:然而在最近的面试中通过学习和思考,找到了前进的方向,也得到一些大公司的录用机会。算是从初级前端毕业,进阶了吧。在这里先写个目录。赶时间的同学可以按照我的目录先自行准备提升,希望推荐文章和交流。 背景 之前我分享了文章大厂前端面试考什么?,你们一定很想看答案吧?说实话,答案我是有,在准备面试的时候会时不时翻看,但内容比较多,比较凌乱,不能指望我在一篇文章中写完。 我是从非计算机专业自学前...

    cod7ce 评论0 收藏0
  • 前端文档收集

    摘要:系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法 随笔分类 - HTML5 HTML5中40个最重要的技术点 常用meta整理 网页性能管理详解 HTML5 ...

    jsbintask 评论0 收藏0

发表评论

0条评论

Charlie_Jade

|高级讲师

TA的文章

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