美文网首页
ES6知识点整理——Promise

ES6知识点整理——Promise

作者: 小姑凉喜欢无脸男 | 来源:发表于2018-09-09 23:08 被阅读24次

    Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示。简单点说,它就是用于处理异步操作的,异步处理成功了就执行成功的操作,异步处理失败了就捕获错误或者停止后续操作。

    {
      // 基本定义
      let ajax=function(callback){
        console.log('执行');
        setTimeout(function () {
          callback&&callback.call()
        }, 1000);
      };
      ajax(function(){
        console.log('timeout1');
      })
    }
    
    {
      let ajax=function(){
        console.log('执行2');
        return new Promise(function(resolve,reject){
          setTimeout(function () {
            resolve()
          }, 1000);
        })
      };
    
      ajax().then(function(){
        console.log('promise','timeout2');
      })
    }
    

    其中,Promise中的参数executor是一个执行器函数,它有两个参数resolve和reject。它内部通常有一些异步操作,如果异步操作成功,则可以调用resolve()来将该实例的状态置为fulfilled,即已完成的触发then()方法,如果一旦失败,可以调用reject()来将该实例的状态置为rejected,即失败的触发catch()方法。

    Promise对象含有then方法,then()调用后返回一个Promise对象,意味着实例化后的Promise对象可以进行链式调用(进行下一步),而且这个then()方法可以接收两个函数,一个是处理成功后的函数,一个是处理错误结果的函数。

    {
      let ajax=function(){
        console.log('执行3');
        return new Promise(function(resolve,reject){
          setTimeout(function () {
            resolve()
          }, 1000);
        })
      };
    
      ajax()
        .then(function(){
        return new Promise(function(resolve,reject){
          setTimeout(function () {
            resolve()
          }, 2000);
        });
      })
        .then(function(){
        console.log('timeout3');
      })
    }
    {
      let ajax=function(num){
        console.log('执行4');
        return new Promise(function(resolve,reject){
          if(num>5){
            resolve()
          }else{
            throw new Error('出错了')
          }
        })
      }
    
      ajax(6).then(function(){
        console.log('log',6);
      }).catch(function(err){
        console.log('catch',err);
      });
    
      ajax(3).then(function(){
        console.log('log',3);
      }).catch(function(err){
        console.log('catch',err);
      });
    }
    

    atch()方法和then()方法一样,都会返回一个新的Promise对象,它主要用于捕获异步操作时出现的异常。因此,我们通常省略then()方法的第二个参数,把错误处理控制权转交给其后面的catch()函数

    Promise.all()

    Promise.all()接收一个参数,它必须是可以迭代的,比如数组。

    它通常用来处理一些并发的异步操作,即它们的结果互不干扰,但是又需要异步执行。它最终只有两种状态:成功或者失败。

    它的状态受参数内各个值的状态影响,即里面状态全部为fulfilled时,它才会变成fulfilled,否则变成rejected。

    成功调用后返回一个数组,数组的值是有序的,即按照传入参数的数组的值操作后返回的结果

    {
      //所有图片加载完再添加到页面。当三个promise实例加载完之后才会触发promise.all()的then()
      function loadImg(src){
        return new Promise((resolve,reject)=>{
          let img=document.createELement('img');
          img.src=src;
          img.onload=function(){
            resolve();
          }
          img.onerror=function(err){
            reject(err);
          }
        })
      }
      function showImgs(imgs){
        imgs.forEach(function(img){
          document.body.appenchild(img)
        })
      }
      Promise.all([
        loadImg("http:")
        loadImg("http:")
        loadImg("http:")
      ]).then(showImgs)
    }
    
    Promise.race()

    romise.race()和Promise.all()类似,都接收一个可以迭代的参数,但是不同之处是Promise.race()的状态变化不是全部受参数内的状态影响,一旦参数内有一个值的状态发生的改变,那么该Promise的状态就是改变的状态。就跟race单词的字面意思一样,谁跑的快谁赢。

    {
      //所一个图片加载完就添加到页面
      function loadImg(src){
        return new Promise((resolve,reject)=>{
          let img=document.createELement('img');
          img.src=src;
          img.onload=function(){
            resolve();
          }
          img.onerror=function(err){
            reject(err);
          }
        })
      }
      function showImgs(img){
        let p=document.createELement('p');
        p.appenchild(img);
        document.body.appenchild(p)
      }
      Promise.race([
          loadImg("http:")
          loadImg("http:")
          loadImg("http:")
        ]).then(showImgs)
    }
    

    相关文章

      网友评论

          本文标题:ES6知识点整理——Promise

          本文链接:https://www.haomeiwen.com/subject/ozmdgftx.html