当前位置: 首页 > 科技观察

ES6新语法——Promise详解

时间:2023-03-12 12:30:28 科技观察

Promise简介Promise是一个对象,可以从中获取异步操作的消息。有all、race、reject、resolve等几个方法,原型有then、catch等方法。Promise的两个特点:对象的状态不受外界影响。Promise对象获取一个异步操作,有pending(进行中)、fulfilled(成功)、reject(失败)三种状态。除了异步操作的结果之外,没有其他操作可以更改此状态。状态一旦改变,就不能再改变。从pending到fulfilled和从pending到rejected状态,只要是fulfilled和rejected,状态就不会再变了。state的缺点:Promise不能取消,一旦创建就会立即执行,不能中途取消。如果没有设置回调函数,Promise内部会抛出一个错误,不会向外部反映。当它处于待处理状态时,无法知道它当前正在进行到哪个阶段。使用语法:letp=newPromise((resolve,reject)=>{//resolve和reject是两个函数})p.then(()=>{},//传入resolve函数,resolve翻译成中文就是Solve()=>{}//传入reject函数,reject翻译成中文就是拒绝的意思).catch((reason,data)=>{console.log("Catch失败执行回调抛出原因",reason)})thenmethodthen方法接收两个参数作为参数。第一个参数是Promise执行成功时的回调,第二个参数是Promise执行失败时的回调。只会调用这两个函数中的一个。通过.then添加的回调函数随时调用,可以添加多个回调函数,一次依次独立运行。constp=newPromise((resolve,reject)=>{resolve("success")})p.then((res)=>{console.log(res)//返回成功},(err)=>{console.log(err)})带有多个回调函数constp=newPromise((resolve,reject)=>{resolve(1)})p.then((res1)=>{console.log('res1',res1)//1returnres1*2;}).then((res2)=>{console.log('res2',res2)//2}).then((res3)=>{console.log('res3',res3)//undefinedreturnPromise.resolve('resolve')}).then(res4=>{console.log('res4',res4)//resolve})catch用法还有一个与Promise对象方法then并行的catch方法,用来捕获异常,类似于try...catch,constp1=newPromise((resolve,reject)=>{varnum=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方法表示回调毕竟执行完毕异步操作是c完成,返回结果,返回的数据是一个数组,是多个请求返回的数据的组合。与then方法相同级别。使用语法:Promise.all([p,p1,p2....]).then()使用示例如下:constp1=newPromise((resolve,reject)=>{resolve({name:'倩倩'})})constp2=newPromise((resolve,reject)=>{resolve(['a','b'])})constp3=newPromise((resolve,reject)=>{resolve('两个傻瓜')})Promise.all([p1,p2,p3]).then(res=>{console.log(res)//[{name:'倩倩'},['a','b'],"两个傻瓜"]})race方法all是等待所有异步操作都执行完毕后才执行回调,而race方法则相反。只要执行完一次,不管结果是成功还是失败,都会执行回调,剩下的不会再执行进入race的回调。返回的数据取决于最早执行返回的数据。constp1=newPromise((resolve,reject)=>{resolve({name:'倩倩'})})constp2=newPromise((resolve,reject)=>{setTimeout(()=>{resolve(['a','b'])},1000)})constp3=newPromise((resolve,reject)=>{setTimeout(()=>{resolve('两个傻瓜')},2000)})Promise.race([p1,p2,p3]).then(res=>{console.log(res)//{name:'倩倩'}})为什么要用Promise?Promise的优点指定回调函数的方式更加灵活。支持链式调用,可以解决回调地狱问题。回调地狱是回调函数的嵌套调用,外部回调函数异步执行的结果就是嵌套回调函数的执行条件。回调地狱的缺点是不容易读取和处理异常。Promise的缺点Promise不能取消,一旦创建,立即执行,不能暂停和取消。如果没有设置回调函数,Promise内部抛出的错误将不会反映到外部。当它处于pending(进行中)状态时,不可能知道它当前正在进行到哪个阶段。