es6 异步操作,Promise简介

Promise

Promise的构造函数接收一个函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,不过可以先这么理解为函数结束后下一步进入哪个方法,一般设置成功进入resolve方法,后面再细究概念。

一个简单的promise

// es6Promise
  function a() {
    return new Promise(function (resolve, reject) {
      console.log("a1");
      setTimeout(function () {
        console.log("a1000");
        resolve();
      },1000)
    });
  }
  a()

运行代码,会先输出"a1",等待1秒后输出"a1000",并且返回一个promise对象

过去es5处理异步操作

如果异步操作过多,代码的执行的逻辑顺序会比较难以观察,不利于书写和维护。特别是在写node.js代码的时候,大部分的操作都是异步操作。

 console.log("es5");
 
    function a() {
      console.log("a1");
      setTimeout(function () {
        console.log("a1000");
        b()
      },1000)
    }

    function b() {
      console.log('b1')
    }

    a()
    // a1
    // a1000
    // b1

Promise处理异步操作

写好方法后,只需在一个地方用then链式的调用,代码维护起来就方便多了,谁用谁知道!


  console.log("es6Promise");
  function a() {
    return new Promise(function (resolve, reject) {
      console.log("a1");
      setTimeout(function () {
        console.log("a1000");
        resolve();
      },1000)
    });
  }

  function b() {
    return new Promise(function (resolve, reject) {
      console.log('b1');
      setTimeout(function () {
        console.log("b1000");
        resolve()
      },1000)
    })
  }

  function c() {
    console.log('c1')
  }

  a().then(function () {
    console.log("then1");
    return b()
  }).then(function () {
    console.log("then2");
    return c()
  })

    // es6Promise
    // a1
    // a1000
    // then1
    // b1
    // b1000
    // then2
    // c1

Promise的Reject和catch方法

一般书写promise的时候,不建议让代码进入reject方法,都是进入resolve方法,catch是为了不让代码报错阻塞,对于这两种方法这里就不多做描述了,直接上代码。


  console.log("es6RejectCatch");
  function a() {
    return new Promise(function (resolve, reject) {
      console.log("a1");
      setTimeout(function () {
        console.log("a1000");
        resolve(5);
      },1000)
    });

  }

  function b() {
    return new Promise(function (resolve, reject) {
      console.log('b1');
      var _null;
      setTimeout(function () {
        console.log("b1000");
        //进入ject
        _null ? resolve() : reject("b_reject")

      },1000)
    })
  }

  function c() {
    return new Promise(function (resolve, reject) {
      console.log('c1');
      setTimeout(function () {
        console.log("c1000");
        resolve()
      },1000)
    })
  }

  a().then(function () {
    console.log("then1");
    return b()
  }).then(
    function () {
    console.log("then2");
    return c()
  },
    function ( data) {
      console.log("rej");
      console.log("data::",data);
      //看catch方法开启
      // console.log(da);
      return c()
    }
  ).catch(function (reason) {
    console.log("catch::",reason)
  })

  // es6RejectCatch
  // a1
  // a1000
  // then1
  // b1
  // b1000
  // rej
  // data:: b_reject
  // c1
  // c1000

Promise的all方法

all方法就是等多个异步函数都执行完,并且返回数组

  console.log("es6PromiseAll");
  function a() {
    return new Promise(function (resolve, reject) {
      console.log("a1");
      setTimeout(function () {
        console.log("a1000");
        resolve("a_resolve");
      },1000)
    });

  }

  function b() {
    return new Promise(function (resolve, reject) {
      console.log('b1');
      setTimeout(function () {
        console.log("b1000");
         resolve("")
      },1000)
    })
  }

  function c() {
    return new Promise(function (resolve, reject) {
      console.log('c1');
      setTimeout(function () {
        console.log("c1000");
        resolve("c_resolve")
      },1000)
    })
  }

  Promise.all([a(), b(), c()]).then(function (result) {
    console.log("result::",JSON.stringify(result))
  })

  // es6PromiseAll
  // a1
  // b1
  // c1
  // a1000
  // b1000
  // c1000
  // result:: ["a_resolve","","c_resolve"]

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值