当前位置:首页 > 技术分析 > 正文内容

ES6新增语法(五)——Promise详解(promise是es6新增吗)

ruisui883个月前 (02-03)技术分析18


Promise介绍

promise是一个对象,从它可以获取异步操作的消息。有all、race、reject、resolve这几个方法,原型上有then、catch等方法。

Promise的两个特点:

  • 对象的状态不受外界影响。Promise对象获取的是异步操作,有三种状态:pending(进行中)、fulfilled(已成功)、reject(已失败)。除了异步操作的结果,其他操作都无法改变这个状态。
  • 一旦状态改变,就不会再变。从pending变为fulfilled和从pending变为rejected状态,只要处于fulfilled和rejected,状态就不会再变。

状态的缺点:

无法取消Promise,一旦新建它就会立即执行,无法中途取消。

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

当处于pending状态时,无法得知目前进展到哪一阶段。

使用语法:

let p = new Promise( (resolve,reject)=>{

//resolve 和reject是两个函数

})

p.then(

()=>{}, // 传入的resolve函数,resolve翻译成中文是解决

()=>{} //传入的reject函数,reject翻译成中文是拒绝

).catch((reason,data)=>{

console.log("catch失败执行回调抛出原因",reason)

})

then方法

then方法接收两个参数作为参数,第一个参数是Promise执行成功时的回调,第二个参数是Promise执行失败的回调,两个函数只会有一个被调用。

通过.then添加的回调函数,不论什么时候,都会被调用,而且可以添加多个回调函数,会一次按照顺序并且独立运行。

const p =new Promise((resolve,reject)=>{
 resolve("成功")
})
p.then((res)=>{
 console.log(res)//返回成功
},(err)=>{
 console.log(err)
})

带有多个回调函数时

const p =new Promise((resolve,reject)=>{
 resolve(1)
})
p.then((res1)=>{
 console.log('res1',res1) // 1
 return res1 * 2;
}).then((res2)=>{
 console.log('res2',res2) //2
}).then((res3)=>{
 console.log('res3',res3) //undefined
 return Promise.resolve('resolve')
}).then(res4=>{
 console.log('res4',res4) //resolve
})

catch用法

与Promise对象方法then并行的还有一个catch方法,用来捕获异常的,与try...catch类似,

const p1 = new Promise((resolve,reject)=>{
 var num = Math.random()*10 ;//随机生成一个0-10的数字 
 console.log("num",num)
 if(num > 5){
  resolve('大于5')
 }else{
  reject("小于5")
 }
})
p1.then(res=>{
 console.log("res",res) // res 大于5
}).catch(err=>{
 console.log("err",err) // err 小于5
})

all方法

all方法表示所有的异步操作完成后才执行回调,返回结果,返回的数据是个数组,多个请求返回的数据组合。与then方法同级。

使用语法:Promise.all([ p,p1,p2.... ]).then()

使用实例如下:

const p1 = new Promise((resolve,reject)=>{
 resolve({
  name:'倩倩'
 })
})
const p2 = new Promise((resolve,reject)=>{
 resolve(['a','b'])
})
const p3 = new Promise((resolve,reject)=>{
 resolve('二傻子')
})
Promise.all([p1,p2,p3]).then(res=>{
 console.log(res)//[{name:'倩倩'}, ['a','b'], "二傻子"]
})

race方法

all是等所有的异步操作都执行完成了再执行回调,而race方法是相反的,只要有一个执行完成,不论结果是成功还是失败,都开始执行回调,其余的不会再进入race的回调。返回的数据取决于最早执行完毕返回的数据。

const p1 = new Promise((resolve,reject)=>{
 resolve({
  name:'倩倩'
 })
})
const p2 = new Promise((resolve,reject)=>{          
 setTimeout(()=>{
  resolve(['a','b'])
 },1000)
})
const p3 = new Promise((resolve,reject)=>{
 setTimeout(()=>{
  resolve('二傻子')
 },2000)
})
Promise.race([p1,p2,p3]).then(res=>{
 console.log(res)//{name:'倩倩'}
})

为什么使用Promise?

Promise的优点

  • 指定回调函数的方式更加灵活。
  • 支持链式调用,可以解决回调地狱问题。回调地狱就是回调函数嵌套调用,外部回调函数异步执行的结果是嵌套的回调函数的执行条件。回调地狱的缺点是不便于阅读和异常处理。

Promise的缺点

  • 无法取消Promise,一旦新建就会立即执行,无法暂停和取消。
  • 如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
  • 当处于pending(进行中)状态时,无法得知目前进展到哪一个阶段。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/696.html

分享给朋友:

“ES6新增语法(五)——Promise详解(promise是es6新增吗)” 的相关文章

培训机构财务及缴费管理系统

学校收费软件是专门为学校财务量身打造的用于灵活性收取学生费用,智能化管理学生缴欠费信息的一款智能系统。1.灵活性全面的学生档案(学籍)信息化管理要计费,一定要有学生信息。所以就算是财务的收费软件,关于学生的档案资料(学籍)管理,同样是计费系统软件不可缺少的部分。档案资料属性,全面、灵活性、能自定义。...

vue中组件之间的通信方式

** 1.1 父子组件**a. 父向子传数据: 第1种: 父通过属性传值,子组件通过props接收数据(注:props传过来的数据是单向的,不可以进行修改)第2种:子组件可以通过$parent来获取父组件里的数据和调用父组件的方法(注:数据是双向的,还要注意如用了UI组件并且在该UI组件里重新定义一...

jvm疯狂吃内存,到底是谁的锅?

jvm应该是每一个java程序员都需要掌握的内容,但是在没有遇到问题之前,很多都是基于理论的,唯有实战才能增加个人的知识储备。本文是从一个角度来分析是谁在狂吃内存,希望对你有所帮助。本文是易观技术人员注意到一台开发机上各个微服务进程占用内存很高,随即便展开了调查......ps:本文来源于:http...

数组、去重、排序、合并、过滤、删除

ES6数字去重 Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4] [...new Set([1,2,3,3,4,4])] //[1,2,3,4]2、ES6数字排序 [1,2,3,4].sort(); // [1, 2,3,4],默认是升序...

一起学Vue:路由(vue-router)

前言学习vue-router就要先了解路由是什么?前端路由的实现原理?vue-router如何使用?等等这些问题,就是本篇要探讨的主要问题。vue-router是什么路由是什么?大概有两种说法:从路由的用途上来解释路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同。从路由的实现原理上来解释路...

Vue中路由router的基本使用

??本文开始我们来给大家介绍在Vue中非常重要的一个内容,就是路由Router什么是路由后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特...