JS promise用法总结

0、前言

        处在前后端分离开发模式的时代，前端向后端请求数据似乎已经司空见惯，在稍微复杂一点的业务中就可能遇到串行接口的情况，这就会产生回调嵌套，回调过深会导致代码可维护性差，因此需要一种解决回调过深的方案：promise。ES6 promise语法精深，本文只介绍工作中最常用到的promise相关知识。

1、promise语法

• 创建promise

var promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
//实例
function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();

    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };

    image.src = url;
  });
}

创建promise最重要的操作就是确定何时执行resolve方法

• Promise.prototype.then方法

1. 虽然then方法接受两个函数作为参数，但一般只写成功回调，并用catch代替失败回调

//bad
promise.then(successFn,errorFn)
//good
promise.then(successFn).catch(errorFn)

2. 根据successFn返回的结果，then有不同的返回值,then方法总是返回一个新的promise：
   2.1 当successFn返回普通值v1时，then返回原来的promise，并将v1作为后续then方法的成功回调参数；
   2.2 当successFn返回已经被resolved的promise时，then返回原来的promise，并将successFn返回的promise值作为后续then方法的成功回调参数；
   2.3 当successFn返回一个未被resolved的promise1时，then方法返回的promise将与promise1具有一致的状态，可以看成then方法返回了promise1

• Promise.prototype.resolve方法
  根据resolve方法接受的参数类型分为：
  1、promise，直接返回这个promise
  2、普通类型（不包含then方法的对象），返回一个立即resolve的promise
  3、不传参数，返回一个立即resolve的promise
• Promise.prototype.all方法
  接受promise组成的数组，并能使结果有序返回。缺点是一旦其中一个promise被rejected，所有数据都拿不到了。返回的结果以数组形式存储，可按下标依次取出

2、promise运用场景

1、单个请求promise化

//异步加载图片
function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    image.onload = function() {
      resolve(image);
    };
    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };
    image.src = url;
  });
}
loadImageAsync(url).then(successFn).catch(handleError)

2、多个串行请求promise化
场景：先拿用户信息，再获取数据

//方案1
getUserInfo().then(getData).then(successFn).catch(handleError)
方案2
async function fn(){
    let userInfo=await getUserInfo();
    let data=await getData(userInfo);
    return data;
}
fn().then(successFn).catch(errorFn);

方案2的async函数写法使得串行的链式调用变成了同步写法，语义更加清楚
3、多个并行请求promise化
场景：一次性拿不同tab下的数据
方案1：使用Promise.all()方法

let tab1_promise=getHotData();
let tab2_promise=getLatestData();
let arr=[tab1_promsie,tab2_promise];
Promise.all(arr).then(([tab1_data,tab2_data])=>handleFn).catch(errorFn);

这种方式显然有风险，可考虑如下方案2
方案2：顺序执行promise

let arr=[tab1_promise,tab2_promise];
arr.reduce((task,promise)=>{
      return task.then(()=>return promise).then(successFn);
},Promise.resolve());

这种方案可以对每个promise的返回值单独处理，不必等到所有数据一起返回才处理，更加灵活

3、总结

• 创建一个promise的关键在于确定resolve的执行时机
• then方法总是返回一个新的promise
• 使用这种写法promise.then(successFn).catch(errorFn),而不是promise.then(successFn,errorFn)
• Promise.reslove()可以创造一个立即resolve的promise，结合reduce方法可使代码更加精炼
• async函数基于Promise，可解决串行链式调用过长的问题，并且语义清楚，推荐使用
• Promise.all方法有风险，尽量不用

掌握以上这些，应该能够应对工作中JS的异步处理了