再不用ES6就Out了--Promise解决回调地狱

Promise的介绍

特点:
* 它有三种状态:Pending(进行中)Resolved(已完成)Rejected(失败)
* 一旦建立,就无法取消。这是它的缺点。

基本写法:

  let flag = true;
  let p = new Promise((resolve, reject) => {
    if (flag) {
      resolve('success');
    }
    else {
      reject('error');
    }
  });
  p.then(res => console.log(res), error => console.log(error));
  输出 success

这里我们不推荐在then中的第二参数传入error的回调,而是用catch代替:

  let flag = false;
  let p = new Promise((resolve, reject) => {
    if (flag) {
      resolve('success');
    }
    else {
      reject('error');
    }
  });
  p.then(res => console.log(res), error => console.log(error));
  输出 error

Promise.all([…promise])方法:
* 传入你要执行的promise数组
* 所有的promise的状态为Resolved,Promise.all返回的才是Resolved状态。
* Resolved的状态返回的为每个promise结果的数组。
* 一旦其中一个promise的状态为Rejected,则Promise.all的状态就为Rejected。

  let p1 = new Promise((resolve, reject) => {
    resolve('one success');
  });

  let p2 = new Promise((resolve, reject) => {
    resolve('two success');
  });

  let p = Promise.all([p1,p2]);
  p.then(res => {
    console.log(res); //["one success", "two success"]
    console.log('all success'); //"all success"
  }).catch(error => console.log(error));

Promise.race([…promise])
* 只要有一个promise的状态发生改变,Promise.race就返回状态。

  let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('step one');
    }, 1000);
  });

  let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('step two');
    }, 500);
  });

  let p = Promise.race([p1, p2]);

  p.then((res) => console.log(res))
    .catch((error) => console.log(error));

  输出 step two

简单的一个应用 先处理下载任务 再处理保存任务(这里我就用setTimeout模拟了)
* 这一篇在node使用promise处理同步任务的例子

  let down = (resolve, reject) => {
    setTimeout(()=> {
      resolve('下载任务处理完成');
    }, 1000);
  }

  let save = (resolve, reject) => {
    setTimeout(() => {
      resolve('文件保存完成');
    }, 500);
  }

  let p = () => {
    new Promise(down).then((res) => {
      console.log(res);
      return new Promise(save);
    })
    .then((res) => console.log(res))
    .catch(error => console.log(error));
  }
  p();

  一定要注意promise一旦建立,立即执行。
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值