Promise 的链式调用与中止

[nodejh]

Abstract

本文主要讲的是如何实现 Promise 的链式调用。也就是 promise().then().then().catch() 的形式，然后讨论如何在某一个 then() 里面中止 Promise。

在程序中，只要返回了一个 promise 对象，如果 promise 对象不是 Rejected 或 Fulfilled 状态，then 方法就会继续调用。利用这个特性，可以处理多个异步逻辑。但有时候某个 then 方法的执行结果可能会决定是否需要执行下一个 then，这个时候就需中止 promise，主要思想就是使用 reject 来中止 promise 的 then 继续执行。

“中止”这个词不知道用得是否准确。这里可能还是 break 的含义更精确，跳出本次 promise，不继续执行后面的 then 方法。但 promise 依旧会继续执行。

Can I use promises

当前浏览器对 Promise 的支持情况见下图：

http://caniuse.com/#search=promise

Promise

先简单复习一下 Promise。Promise 其实很简单，就是一个处理异步的方法。一般可以通过 new 方法来调用 Promise 的构造器实例化一个 promise 对象：

var promise = new Promise((resolve, reject) => {
    // 异步处理
    // 处理结束后，调用 resolve 或 reject
    //      成功时就调用 resolve
    //      失败时就调用 reject
});

用 new Promise 实例化的 promise 对象有以下三个状态：

• "has-resolution" - Fulfilled。resolve(成功)时，此时会调用 onFulfilled

• "has-rejection" - Rejected。reject(失败)时，此时会调用 onRejected

• "unresolved" - Pending。既不是resolve也不是reject的状态，也就是promise对象刚被创建后的初始化状态等

关于上面这三种状态的读法，其中左侧为在 ES6 Promises 规范中定义的术语， 而右侧则是在 Promises/A+ 中描述状态的术语。基本上状态在代码中是不会涉及到的，所以名称也无需太在意。

Promise Chain

先来假设一个业务需求：在系统中使用教务系统账号进行登录。首先用户在登录页面输入用户名（教务系统账号）和密码（教务系统密码）；然后判断数据库中是否存在该用户；如果不存在则使用用户名和密码模拟登录教务系统，如果模拟登录成功，则存储用户名和密码，并返回登录成功。

听起来就有点复杂对不对？于是画了个流程图来解释整个业务逻辑：

上图只是一个简化版本，比如密码加密、session设置等没有表现出来，大家知道就好。图中 (1)、(2)、(3) 三个地方就是会进行异步处理的地方，一般数据库操作、网络请求都是异步的。

如果用传统的回调函数 callback 来处理上面的逻辑，嵌套的层级就会比较深，上面的业务因为有三个异步操作所以有三层回调，代码大概会是下面的样子：

// 根据 name 查询用户信息
findUserByName(name, function(err, userinfo) {
  if (err) {
    return res.json({
      code: 1000,
      message: '查询用户信息，数据库操作数出现异常',
    });
  }


  if (userinfo.length > 0) {
  // 用户存在
  if (userinfo[0].pwd === pwd)
    // 密码正确
    return res.json({
      code: 0,
      message: '登录成功',
    });
  }

  // 数据库中不存在该用户，模拟登录教务系统
  loginEducationSystem(name, pwd, function(err, result) {
    if (err) {
      return res.json({
        code: 1001,
        message: '模拟登录教务系统出现异常',
      });
    }

    // 约定正确情况下，code 为 0
    if (result.code !== 0) {
      return res.json({
        code: 1002,
        message: '模拟登录教务系统失败，可能是用户名或密码错误',
      });
    }

    // 模拟登录成功，将用户名密码存入数据库
    saveUserToDB(name, pwd, function(err, result) {
      if (err) {
        return res.json({
          code: 1003,
          message: '将用户名密码存入数据库出现异常',
        });
      }
      if (result.code !== 0) {
        return res.json({
          code: 1004,
          message: '将用户名密码存入数据库出现异常',
        });
      }

      return res.json({
        code: 0,
        message: '登录成功!',
      });
    });
  });
});

上面的代码可能存在的不优雅之处：

• 随着业务逻辑变负责，回调层级会越来越深
• 代码耦合度比较高，不易修改
• 每一步操作都需要手动进行异常处理，比较麻烦

接下来再用 promise 实现此处的业务需求。使用 promise 编码之前，可以先思考两个问题。

一是如何链式调用，二是如何中止链式调用。

How to Use Promise Chain

业务中有三个需要异步处理的功能，所以会分别实例化三个 promise 对象，然后对 promise 进行链式调用。那么，如何进行链式调用？

其实也很简单，直接在 promise 的 then 方法里面返回另一个 promise 即可。例如：

function start() {
  return new Promise((resolve, reject) => {
    resolve('start');
  });
}

start()
  .then(data => {
    // promise start
    console.log('result of start: ', data);
    return Promise.resolve(1); // p1
  })
  .then(data => {
    // promise p1
    console.log('result of p1: ', data);
    return Promise.reject(2); // p2
  })
  .then(data => {
    // promise p2
    console.log('result of p2: ', data);
    return Promise.resolve(3); // p3
  })
  .catch(ex => {
    // promise p3
    console.log('ex: ', ex);
    return Promise.resolve(4); // p4
  })
  .then(data => {
    // promise p4
    console.log('result of p4: ', data);
  });

上面的代码最终会输出：

result of start:  start
result of p1:  1
ex:  2
result of p4:  4

代码的执行逻辑如图：

从图中可以看出来，代码的执行逻辑是 promise start --> promise p1 --> promise p3 --> promise p4。所以结合输出结果和执行逻辑图，总结出以下几点：

• promise 的 then 方法里面可以继续返回一个新的 promise 对象
• 下一个 then 方法的参数是上一个 promise 对象的 resolve 参数
• catch 方法的参数是其之前某个 promise 对象的 rejecte 参数
• 一旦某个 then 方法里面的 promise 状态改变为了 rejected，则promise 方法连会跳过后面的 then 直接执行 catch
• catch 方法里面依旧可以返回一个新的 promise 对象

How to Break Promise Chain

接下来就该讨论如何中止 promise 方法链了。

通过上面的例子，我们可以知道 promise 的状态改变为 rejected 后，promise 就会跳过后面的 then 方法。

也就是，某个 then 里面发生异常后，就会跳过 then 方法，直接执行 catch。

所以，当在构造的 promise 方法链中，如果在某个 then 后面，不需要再执行 then 方法了，就可以把它当作一个异常来处理，返回一个异常信息给 catch，其参数可自定义，比如该异常的参数信息为 { notRealPromiseException: true}，然后在 catch 里面判断一下 notRealPromiseException 是否为 true，如果为 true，就说明不是程序出现异常，而是在正常逻辑里面中止 then 方法的执行。

代码大概就这样：

start()
  .then(data => {
    // promise start
    console.log('result of start: ', data);
    return Promise.resolve(1); // p1
    )
  .then(data => {
    // promise p1
    console.log('result of p1: ', data);
    return Promise.reject({
      notRealPromiseException: true,
    }); // p2
  })
  .then(data => {
    // promise p2
    console.log('result of p2: ', data);
    return Promise.resolve(3); // p3
  })
  .catch(ex => {
    console.log('ex: ', ex);
    if (ex.notRealPromiseException) {
      // 一切正常，只是通过 catch 方法来中止 promise chain
      // 也就是中止 promise p2 的执行
      return true;
    }
    // 真正发生异常
    return false;
  });

这样的做法可能不符合 catch 的语义。不过从某种意义上来说，promise 方法链没有继续执行，也可以算是一种“异常”。

Refactor Callback with Promise

讲了那么多道理，现在就改来使用 promise 重构之前用回调函数写的异步逻辑了。

// 据 name 查询用户信息
const findUserByName = (name, pwd) => {
  return new Promise((resolve, reject) => {
    // 数据库查询操作
    if (dbError) {
      // 数据库查询出错，将 promise 设置为 rejected
      reject({
        code: 1000,
        message: '查询用户信息，数据库操作数出现异常',
      });
    }
    // 将查询结果赋给 userinfo 变量
    if (userinfo.length === 0) {
      // 数据库中不存在该用户
      resolve();
    }
    // 数据库存在该用户，判断密码是否正确
    if (pwd === userinfo[0].pwd) {
      // 密码正确，中止 promise 执行
      reject({
        notRealPromiseException: true,
        data: {
          code: 0,
          message: '密码正确，登录成功',
        }
      });
    }
    // 密码不正确，登录失败，将 Promise 设置为 Rejected 状态
    reject({
      code: 1001,
      message: '密码不正确，登录失败',
    });
  });
};


// 模拟登录教务系统
const loginEducationSystem = (name, pwd) => {
  // 登录逻辑...
  // 登录成功
  resolve();
  // 登录失败
  reject({
    code: 1002,
    message: '模拟登录教务系统失败',
  });
};


// 将用户名密码存入数据库
const saveUserToDB(name, pwd) => {
  // 数据库存储操作
  if (dbError) {
    // 数据库存储出错，将 promise 设置为 rejected
    reject({
      code: 1004,
      message: '数据库存储出错，将出现异常',
    });
  }
  // 数据库存储操作成功
  resolve();
};


findUserByName(name)
.then(() => {
  return loginEducationSystem(name, pwd);
})
.then(() => {
  return saveUserToDB(name, pwd);
})
.catch(e => {
  // 判断异常出现原因
  if (e.notRealPromiseException) {
    // 正常中止 promise 而故意设置的异常
    return res.json(e.data);
  }
  // 出现错误或异常
  return res.json(e);
});

在上面的代码中，实例化了三个 promise 对象，分别实现业务需求中的三个功能。然后通过 promise 方法链来调用。相比用回调函数而言，代码结构更加清晰，也更易读易懂耦合度更低更易扩展了。

Promise.all && Promise.race

仔细观察可以发现，在上面的 promise 代码中，loginEducationSystem 和 saveUserToDB 两个方法执行有先后顺序要求，但没有数据传递。

其实 promise 方法链更好用的一点是，当下一个操作依赖于上一个操作的结果的时候，可以很方便地通过 then 方法的参数来传递数据。前面页提到过，下一个 then 方法的参数就是上一个 then 方法里面 resolve 的参数，所以当然就可以把上一个 then 方法的执行结果作为参数传递给下一个 then 方法了。

还有些时候，可能 then 方法的执行顺序也没有太多要求，只需要 promise 方法链中的两个或多个 promise 全部都执行正确。这时，如果依旧一个一个去写 then 可能就比较麻烦，比如：

function p1() {
  return new Promise((resolve) => {
    console.log(1);
    resolve();
  });
}

function p2() {
  return new Promise((resolve) => {
    console.log(2);
    resolve();
  });
}

function p3() {
  return new Promise((resolve) => {
    console.log(3);
    resolve();
  });
}

现在只需要 p1 p2 p3 这三个 promise 都执行，并且 promise 最终状态都是 Fulfilled，那么如果还是使用方法链，这是这样调用：

p1()
.then(() => {
  return p2();
})
.then(() => {
  return p3();
})
.then(() => {
  console.log('all done');
})
.catch(e => {
  console.log('e: ', e);
});

// 输出结果：
// 1
// 2
// 3
// all done

代码貌似就不那么精炼了。这个时候就有了 Promise.all 这个方法。

Promise.all 接收一个 promise对象的数组作为参数，当这个数组里的所有 promise 对象全部变为 resolve 或 reject 状态的时候，它才会去调用 then 方法。

于是，调用这几个 promise 的代码就可以这样写了：

p1()
.then(() => {
  return Promise.all([
    p2(),
    p3(),
  ]);
})
.then(() => {
  console.log('all done');
})
.catch((e) => {
  console.log('e: ', e);
});

// 输出结果：
// 1
// 2
// 3
// all done

这样看起来貌似就精炼些了。

而对于 Promise.race，其参数也跟 Promise.all 一样是一个数组。只是数组中的任何一个 promise 对象如果变为 resolve 或者reject 的话，该函数就会返回，并使用这个 promise 对象的值进行 resolve 或者 reject。

这里就不举例了。

Conclusion

到目前为止，我们就基本了解了 Promise 的用法及特点，并实现用 Promise 重构用回调函数写的异步操作。现在对 Promise 的使用，应该驾轻就熟了。

完。

---

Github Issue: #23

[SamElvi]

醍醐灌顶！！！！

[Johnhong9527]

逻辑简洁,思路清晰,把我之前没搞明白的思路都理顺了,谢谢