首页手记掌握ES6 Promise的使用

掌握ES6 Promise的使用

标签：

JavaScript

在Javascript的世界只有单线程模式，那么是不是所有的代码都是“自上而下顺序”进行执行的呢？这也是最容易理解的方式，但不是这样的，由于单线程同一时间只能去做一件事，进而引发性能问题，有了异步（执行顺序是根据事件优先级，不是自上而下），异步非阻塞是一个很好的解决方案，但是也有几点不好之处：一方面是代码可读性差，另一方面异步回调callback产生的回调地狱问题，一直被诟病，同样伴随这些异步问题，又有了新的解决方案Promise、async/await，本节主要介绍Promise的实现。

callback写法模拟ajax

回调函数方式书写，如果异步请求多了，将会很难维护，程序看着很乱

{
  let ajax = function(callback){
    console.log('执行');
    setTimeout(function(){
      callback && callback()
    });
  }
  ajax(function(){
    console.log('执行 ajax方法');
  })
}

Promise进行改写

Promise/A+规范参考 http://www.ituring.com.cn/article/66566
resolve： promise成功时进行的操作，规范中常用fulfill表示表示解决。
reject： 失败时中断当前操作，抛出Error。
.then： then函数，不明文指定返回实例，返回本身的promise实例，否则返回指定的promise实例。
.catch：异常捕获（Error、reject）。
Promise标准-状态变化（Pending —— Fulfilled/Rejected）

{
  let ajax = function(){
    console.log('promise','执行');
    return new Promise(function(resolve,reject){
      setTimeout(function(){
        resolve()
      },1000);
    });
  }
  ajax().then(function(){
    console.log('promise','执行ajax方法');
  });
}

Promise实现串行操作

执行a b c d 如果中间出了错误使用catch来捕获

let ajax = function(num){
	return new Promise(function(resolve,reject){
		if (num < 4) {
		resolve();
		}else{
		throw new Error('出错了')
		}
	});
}
ajax(1)
	.then(function(){
		console.log('log','a');
		return ajax(2);
	})
	.then(function(){
		console.log('log','b');
		return ajax(3);
	})
	.then(function(){
		console.log('log','c');
		return ajax(4);
	}).then(function(){
		console.log('log','d');
	}).catch(function(err){
		console.log('catch',err);
	});

输出结果：
可以看到成功输出a、b、c，最后执行return ajax(4)时由于4不小于4判断条件不成立，抛出Error错误d没有执行。

log a
VM183:17 log b
VM183:21 log c
VM183:27 catch Error: 出错了
    at <anonymous>:7:9
    at new Promise (<anonymous>)
    at ajax (<anonymous>:3:9)
    at <anonymous>:22:10

Promise.all并行操作

Promise.all是将多个Promise实例当成一个Promise实例，all下面就是一个数组，数组传进来多个Promise实例，当多个Promise实例状态发生改变的时候，这个新的Promise实例才会发生变化。

{
  //所有图片加载完在添加到页面上
  function loadImg(src){
    return new Promise((resolve,reject) => {
      let img = document.createElement('img');
      img.src = src;
      img.onload = () => {
        resolve(img);
      }
      img.onerror = (err) => {
        reject(err)
      }
    })
  }
  function showImgs(imgs){
    imgs.forEach(function(img){
      document.body.appendChild(img)
    })
  }
  //每个loadImg()方法都是一个Promise实例只有当三个都发生该变化，才会执行新的Promise实例既Promise.all()
  Promise.all([
    loadImg('http://www.qzfweb.com/uploads/20170512190539489.jpeg'),
    loadImg('http://www.qzfweb.com/uploads/20170225143135972.jpg'),
    loadImg('http://www.qzfweb.com/uploads/20170217225453679.jpg')
  ]).then(showImgs)
}

Promise.race

Promise.race只要其中一个实例率先发生改变，Promise.race实例也将发生改变，其他的将不在响应。

{
  //有一个图片加载完就添加到页面上
  function loadImg(src){
    return new Promise((resolve,reject) => {
      let img = document.createElement('img');
      img.src = src;
      img.onload = () => {
        resolve(img);
      }
      img.onerror = (err) => {
        reject(err)
      }
    })
  }
  function showImgs(img){
    let p = document.createElement('p');
    p.appendChild(img);
    document.body.appendChild(p);
  }
  //每个loadImg()方法都是一个Promise实例只有当三个都发生该变化，才会执行新的Promise实例既Promise.all()
  Promise.race([
    loadImg('http://www.qzfweb.com/uploads/20170512190539489.jpeg'),
    loadImg('http://www.qzfweb.com/uploads/20170225143135972.jpg'),
    loadImg('http://www.qzfweb.com/uploads/20170217225453679.jpg')
  ]).then(showImgs)
}

Promise两种错误捕获比较

.then第二参数捕获错误

.then第二个回调参数捕获错误具有就近的原则，不会影响后续then的进行。

const ajax = function(){
  console.log('promise开始执行');
  return new Promise(function(resolve,reject){
    setTimeout(function(){
    reject(`There's a mistake`);
    },1000);
  });
}

ajax()
  .then(function(){
    console.log('then1');

    return Promise.resolve();
  })
  .then(function(){
    console.log('then2');

    return Promise.reject(`There's a then mistake`);
  }, err => {
   console.log('then1里面捕获的err: ', err);
 })
 .catch(err => {
    console.log('catch里面捕获的err: ', err);
  })

// 输出
// promise开始执行
// then1里面捕获的err:  There's a mistake
// then2
// catch里面捕获的err:  There's a then mistake

catch捕获错误

Promise抛错具有冒泡机制，能够不断传递，可以使用catch统一处理，下面代码中不会输出then1、then2会跳过，直接执行catch处理错误

const ajax = function(){
  console.log('promise开始执行');
  return new Promise(function(resolve,reject){
    setTimeout(function(){
    reject(`There's a mistake`);
    },1000);
  });
}

ajax()
  .then(function(){
    console.log('then1');

    return Promise.resolve();
  })
  .then(function(){
    console.log('then2');

    return Promise.reject(`There's a then mistake`);
  })
 .catch(err => {
    console.log('catch里面捕获的err: ', err);
  })
// 输出
// promise开始执行
// catch里面捕获的err:  There's a then mistake