复盘打码功能

最近工作中，需求方提出了一个打印条码的功能，需要将指定样本及其关联实验单的编号全部打印出来。
后端会把我需要的打码入参返回给我，前端需要做的是：引入厂家提供的js文件，调用提供的js方法初始化打印机，从后台获取打码参数，调用打码机打印方法，即可完成打码功能。
备注：涉及到打印的按钮共三种：打印当前样本条码，打印所有样本，打印所有样本并流转至待处理。
与后台沟通后，确定返回的打印参数是一个数组list，以便适应全部打印按钮。循环这个参数list，并逐个打印。

这其中遇到了几个值得记录的问题：

打码机厂家提供的初始化及打印方法放在一个立即执行方法中，无法直接引入调用；
由于初始化打码机、从后台获取参数均为异步方法，且为嵌套方法，那么打码机断开或打印失败时，怎样及时弹出错误提醒；
功能中包含一个全部打印并流转的按钮，如果打印失败，怎样阻止流转方法的调用。
获取打印机时，会把能识别的所有设备都拿到，有可能存在超过两个设备的情况（比如安装了多个打印设备的驱动等等），这时需要提供一个弹框，可以选择待使用的打印机。
2，3的主要难点在于打码机相关的方法均为原生xhr方法，怎样用Promise进行适当改写。

以下针对上面提到的四点一一记录。

1.模块方法改写
直接拿到的是一个min.js文件，核心方法如下：

.

..
var BrowserPrint=function(){
	...
	var e = {};
	e.Device = function(a){
		...
		this.send = function(){...}
		...
	}
	return e
}()

采用了立即执行函数来封闭内部私有方法，不会和全局函数互相污染，在原生js或JQuery中用得较多，其实这也是模块化的一种方式，但vue中主要采用import的方式引入文件，因此需要先将该方法导出。改写如下：

let BrowserPrint=function(){
	...
	let e = {};
	e.Device = function(a){
		...
		this.send = function(){...}
		...
	}
	return e
}
export default BrowserPrint

2.打印机获取失败提醒
这块出现场景主要是：断开打印机连接，点击打印按钮，无法正常打印时应弹出对应的错误提醒。
这个时候我们要调用的方法包括：获取打印机，再获取打码参数，打印条码。这三个方法均需要按序完成。
获取打印机用的是XMLHttpRequest 原生方法，使用回调函数会导致方法层层嵌套，不利于理解，考虑使用Promise进行改写。由于原方法偏复杂，在方法定义时直接改写难度较大，我选择在调用时封装进Promise中，并对应进行resolve和reject处理，避免回调地狱。

// 初始化打印机
initPrinter(){
  printerData.printer = browserPrint();
  return new Promise((resolve,reject)=>{
     _BrowserPrint.getDefaultDevice("printer", (device)=>
     {
       ...
       _BrowserPrint.getLocalDevices((device_list)=>{
         ...
         if(!Array.isArray(realDeviceList)||realDeviceList.length==0){
           // 没有获取到打印机
           typeof reject ==='function'&& reject()
         }else{
           typeof resolve ==='function'&& resolve()
         }
       }, function(error){
         typeof reject ==='function'&& reject()
       },"printer");
     }, function(error){
       typeof reject ==='function'&& reject()
     })
   })
}
this.initPrinter().then(res=>{}).catch(err=>{
  utils.msg.error('获取打印机失败')
  return 'error'
})

注意：定义了reject，调用时必须添加catch方法，否则会报错。

3.多层异步嵌套拿到最内层的结果，再进行相应处理
全部打印并流转是逻辑最复杂的方法，包括：

获取打印机（页面初始化后如果没有断开打印机可以省略这一步）;
从后台获取打码参数；
逐一调用打印机进行打印；
打印成功则进行流转，打印失败则弹出错误提醒，并终止逻辑处理。
所有步骤按顺序进行。

其中，步骤1，2可以返回Promise实例，但步骤3仍然是一个xhr原生方法，所以决定在打印方法定义的地方(及下方的send方法)使用Promise进行改写。

// 原始方法
var m = this;
...
this.send = function(d, a, f) {
	var g = b("POST", l + "write");
	g && (void 0 !== m && (void 0 === a && (a = m.sendFinishedCallback), void 0 === f && (f = m.sendErrorCallback)), c(g, a, f), g.send(JSON.stringify({
		device: {
			name: this.name,
			uid: this.uid,
			connection: this.connection,
			deviceType: this.deviceType,
			version: this.version,
			provider: this.provider,
			manufacturer: this.manufacturer
		},
		data: d
	})))
};
...
function c(a, b, d) {
	a.onreadystatechange = function() {
		a.readyState === XMLHttpRequest.DONE && 200 === a.status ? "" === a.responseType ? b(a.responseText) : b(a.response) : a.readyState === XMLHttpRequest.DONE && (d ? d(a.response) : console.log("error occurred with no errorCallback set."))
	};
	return a
}

// 修改后的方法
var m = this;
...
this.send = function(d, a, f) {
	return new Promise((resolve,reject)=>{
		var g = b("POST", l + "write");
		g.onreadystatechange = function(){
			if (g.readyState !== 4) {
				return;
			}
			if (g.status === 200) {
				// 正确回调
				resolve("" === g.responseType ? g.responseText : g.response) 
			} else {
				// 错误回调
				reject(new Error(g.statusText));
			}
		}
		g && (g.send(JSON.stringify({
			device: {
				name: this.name,
				uid: this.uid,
				connection: this.connection,
				deviceType: this.deviceType,
				version: this.version,
				provider: this.provider,
				manufacturer: this.manufacturer
			},
			data: d
		})))
	})
};

这样步骤3也可以返回Promise实例了。由于步骤1~3是不同打印诉求中都要用到，因此封装成一个公共方法_printTag。接下来遇到的一个问题就是，我怎样知道什么时候打印全部完成？
Promise.all方法仅能处理无依赖关系的多个异步方法。后面发现其实很简单，把嵌套内层的异步方法return出去就可以了。
类似这种结构：

test(){
   this._test1().then(res=>{
     return this._test2().then(res=>{
       console.log('log1')
       return Promise.resolve('success')
     })
   }).then(res=>{
     console.log('log2')
     if(res=='success'){
		console.log('log3')
     }
   })
 },
_test1(){
   return new Promise((resolve,reject)=>{
     setTimeout(()=>{
       resolve('第一步')
     })
   })
 },
 _test2(){
   return new Promise((resolve,reject)=>{
     setTimeout(()=>{
       resolve('第二步')
     })
   })
 },

调用test方法时，我们希望打印出来的顺序是log1，log2，并且能打印出log3。通过测试发现，对test做以下改动即可:

改动1保证打印顺序是log1，log2，改动2保证可以拿到返回参数"success"，可以执行打印log3。

4.多个打印设备
基本思路是：

获取打印机；
设备超过一台，出现选择设备弹框，停止接下来的打印操作；
弹框中点击“确定”按钮，继续开始打印操作。
其中，在步骤2出现过错误

// 出错代码示例
if(Array.isArray(printerData.deviceList)&&printerData.deviceList.length==1){
   	// 只有一台打印机
    ...
}else{
  	// 存在多个打印机，出现选择设备弹框
    this.printDialog.visible = true;
    return 'pause'
}

判断条件有一个漏洞，如果设备超过2个，那么一直会执行else逻辑。
正确的应该是：如果存在超过2个设备或者选择弹框已经出现，则执行打印操作。

// 调整后代码
if((Array.isArray(printerData.deviceList)&&printerData.deviceList.length==1)||this.printDialog.visible){
  // 只有一台打印机或已出现选择弹框
  ...
}else{
	// 存在多个打印机，出现选择设备弹框
  this.printDialog.visible = true;
  return 'pause'
}

总结：
这项功能的完成用了很多Promise改写，加深了对Promise使用方法的理解，比如必须使用resolve将Promise状态更改为“完成”，链式调用中才能用then；比如Promise调用时必须添加catch方法，否则可能会报错；比如then方法中return的值是下一个链式调用的返回值。这些问题以前都遇到过，但直接使用时经常不在意，出现这样或那样的问题。