再不用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一旦建立,立即执行。

你可能感兴趣的:(JavaScript)