最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 七日打卡-Vue Promise讲解

    正文概述 掘金(用户2038425731420)   2021-01-11   490

    Promise意在让异步请求逻辑代码变得干净和直观,让异步请求逻辑代码变得井然有序。

    Promise在设计上具有原子性,即只有三种状态:等待(Pending)、成功(Fulfilled)、失败(Rejected)。在调用支持Promise的异步方法时,逻辑变得非常简单,在大规模的软件工程开发中具有良好的健壮性。

    (1)基本语法 创建Promise对象: 要想给一个函数赋予Promise能力,就要先创建一个Promise对象,并将其作为函数值返回。Promise对象要求传入一个函数,并带有resolvereject参数。这是两个用于结束Promise等待的函数,对应的状态分别是成功和失败。

    function asyncMethod(...args){
        return new Promise((resolve,reject)=>{
            //...
        })
    }
    

    将新创建的Promise对象作为异步方法的返回值,所有的状态就可以使用它所提供的方法进行控制了。

    异步操作

    创建了 Promise对象后,就可以进行异步操作,并通过resolve (value)reject (reason)方法来控制Promise的原子状态。

    • resolve(value)方法控制的是当前Promise对象是否进入成功状态,一旦执行该方法并传入有且只有一个返回值,Promise便会从等待状态(Pending)进入成功状态(Fulfilled),Promise也不会再接收任何状态的变。

    • reject (reason)方法控制的是当前Promise对象是否进入失败阶段,与resolve方法相冋,一旦进入失败阶段就无法再改变。

    new Promise((resolve,reject)=>{
        api.call('fetch-data',(err,data)=>{
            if(err) return reject(err)
            resolve(data)
        })
    })
    

    其中,在Promise的首层函数作用域中一旦出现throw语句,Promise对象便会直接进入失败状态,并以throw语句的抛出值作为错误值进行错误处理。

    (new Promise(function() {
        throw new Error ('test')
    )))
    .catch(err =>console.error(err))
    

    但是,return语句并不会使Promise对象进入成功状态,而会使Promise停留在等待状态。所以在Promise对象的执行器(executor)内需要谨慎使用return语句来控制代码流程。

    处理Promise的状态

    resolve(value)reject(reason)方法对应的是,Promise对象有两个用于处理Promise对象状态变化的方法。

    这两个方法都会返回一个Promise对象,Promise对象的组合便会成为一个Promise对象链,呈流水线的模式作业。

     asyncMethod()
     .then((...args)=>args  /*...*/)
     .catch(err=>console.error(err))
    

    Promise链式处理默认被实现,即.then(onFulfilled).catch(onRejected)会处理在onFulfilledonRejected中所返回或抛出的值。

    • 如果onFulfilledonRejected中所返回的值是一个Promise对象,则该Promise对象会被加入到Promise的处理链中。

    • 如果onFulfilledonRejected中返回的值并不是一个Promise对象,则会返回一个己经进入成功状态的Promise对象。

    • 如果onFulfilledonRejected中因为throw语句而抛出一个错误err,则会返回一个已经进入失败状态的Promise对象。

    之所以说Promise对象链呈流水线的模式进行作业,是因为在Promise对象对自身的onFulfilledonRejected响应器的处理中,会对其中返回的Promise对象进行处理。

    其内部会将这个新的Promise对象加入到Promise对象链中,并将其暴露出来,使其继续接受新的Promise对象的加入。只有当Promise对象链中的上一个Promise对象进入成功或失畋阶段,下一个Promise对象才会被激活,这就形成了流水线的作业模式。

    Promise对象链还有一个十分实用的特性--Promise对象的状态是具有传递性的

    如果Promise对象链中的某一环出现错误,Premise对象链便会从出错的环节开始,不断向下传递,直到出现任何一环的Promise对象对错误进行响应为止。

    (2)高级使用方法

    Promise.all(iterable)

    该方法可以传入一个可迭代对象(如数组),并返回一个Promise对象,该Promise对象会 在当可迭代对象中的所冇Promise对象都进入完成状态(包括成功和失畋)后被激活。

    • 如果可迭代对象中的所有Promise对象都进入了成功状态,那么该方法返回的Promise

    对象也会进入成功状态,并以一个可迭代对象来承载其中的所有返回值。

    • 如果可迭代对象中的所有Promise对象存在一个进入了失败状态,那么该方法返回的Promise

    对象也会进入失败状态,并以那个进入失败状态的错误信息作为自己的错误信息。

       Promise.all(promises)
        .then(values=>{
            //...
        })
        .catch(err=>console.error(err))
    

    Promise.race(iterable)

    Promise .race (iterable)方法同样也接受一个包含若干个Promise对象的可迭代对象,但不同的是这个方法会监听所有的Promise对象,并等待其中的第一个进入完成状态的Promise对象,一旦有第一个Promise对象进入了完成状态,该方法返回的Promise对象便会根据这第一个完成的Promise对象的状态而改变。

      Promise.race(promises)
        .then(values=>{
            //...
        })
        .catch(err=>console.error(err))
    

    起源地下载网 » 七日打卡-Vue Promise讲解

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元