Promise应用场景-白红宇

众所周知，Promise是为了解决回调地狱问题而产生的，其主要应用于向发服务端发起请求等异步操。那么，除了异步请求还有其他场景适合使用 Promise 吗？下面我们来共同探讨下。

并发执行的任务

Promise除了用于异步操作，还可以用来记录一个业务流程的状态变化，俗称“状态机”。我们可以使用 Promise 提供的 Promise.all 方法来实现并行执行任务。比如现在有一个表单页，里面有若干多个表单项，只有在所有表单都通过校验才允许用户进行下一步操作。下面我们来提炼关键要素：

校验表单是并发操作（这里不考虑关联表单）

只有所有表单都校验通过才允许下一步操作

当看到这样的业务逻辑时，是不是首先想到的是设置一个 flag 变量，然后通过改变flag变量来表示所有表单是否校验通过，这是最容易想到的实现思路。

let flag = true;let fields = [];fields.forEach(field=>{    if(!field.validate()) {  	    flag = false;//校验不通过    }})复制代码

我们现在来考虑下这么做有没有问题？我们保存了多余的变量，并且这样的代码是不支持远程服务端校验的，如果要支持异步操作需要增加更多的代码量，而且这样的代码也是难以理解和维护的。这个时候我们不妨转换下思路，将每个表单项校验看做是一个 Promise 状态机，当校验通过， Promise 状态为 fullfilled，校验不通过为 rejected。现在我们使用 Promise 重构上面的代码，使每一个表单校验都支持异步操作，并且更加容易理解。

我们可以利用 Promise.all的特性，只有在所有表单项状态都为fullfilled情况下，才允许执行Promise.all后面的then方法

let p1 = new Promise(function(resolve,rejected) {	//表单1校验通过  if(field.validate()) {  	resolve()  } else {  	rejected()  }})//p2,p3...Promise.all([p1,p2,p3...]).then(()=>{	//所有表单项都校验通过})复制代码

顺序执行的任务

有时候我们会遇到有一系列任务顺序执行的情况。举个例子，现在有一个购物车的需求，用户必须先下单之后才能进行付款，然后付款之后才可以跳转到订单页面，这个需求就可以用 Promise 顺序执行的逻辑实现，状态流转是这样的：

我们来提炼下关键需求点：

每一个业务环节需要顺序执行，执行顺序不可变，状态不可逆

上一个执行结果可能需要作为下一步的输入

实现这样的业务逻辑我们同样可以不使用 Promise，但是可能实现过程较复杂。我们知道，系统越是复杂，出错的概率越高，所以我们必须用尽量简单的方法实现以上需求。这里我们将用到 Promise 的顺序执行。

实现Promise顺序执行需求以下两个步骤：

定义一个空的 resolved promise，这个promise只是作为建立链的起点

在一个循环中，通过链中上一个 promise 调用 then()获得新的 promise，更新promise 变量

//利用forEach实现function run(tasks=[]) {  let promise = Promise.resolve();  tasks.forEach(task=>{    promise = promise.then((value)=>{      return task(value);    })  })  return promise;}复制代码

//利于reduce实现function run(tasks=[]) {  let promise = tasks.reduce((prev,task)=>{    return prev.then((value)=>{      return task(value);    })  },Promise.resolve());	return promise}复制代码

兼容callback模式

当然，Promise并不是万金油，不是所有的场合都适合用 Promise。如果是较为简单的逻辑，使用 callback 会更加方便。而且如果我们是在写一个很多人都在用的公共库的话，有些开发者可能不喜欢使用Promise或者对 Promise 不熟悉。这时，我们需要提供一种解决方案，使我们的API可以同时兼容 Promise 和 callback 两种模式。提供一个回调API，回调参数可选，一般情况下使用 callback，在 callback 未传递的情况下使用 Promise。我们可以通过高阶函数实现此功能：

//将返回promise的函数转化为既返回promise又支持//callback的函数,调用时最后一个参数为callbackfunction ptc (fn) {	if(typeof fn !== 'function') {		throw new Error("缺少必要参数");	}	return function(...args) {		let callback = args[args.length-1];		let _args = args.slice(0,args.length-1);		return fn.apply(this,args).then(res=>{			if(typeof callback == 'function') {				callback.call(this,null,res)			}			return res;		}).catch(e=>{			if(typeof callback == 'function') {				callback.call(this,e,null)			}			return e;		})	}}//测试a= function(x) {
   return Promise.resolve(x)}b=pc(a)b('xxx',function(err,data){    console.log(err,data)//err:null,data:'xxx'})b('asss').then(res=>{	console.log(res);})复制代码

总结

Promise 实例可以看做是一个状态机，任何具有状态和状态改变的业务流程都可以使用 Promise 来实现，在结合了 ES7 的 async function特性后功能更加强大。这里我们只是列举了两个很简单的小例子来帮助大家理解，更多复杂的应用场景等待大家去细心观察和总结，共勉！