复盘打码功能
最近工作中,需求方提出了一个打印条码的功能,需要将指定样本及其关联实验单的编号全部打印出来。
后端会把我需要的打码入参返回给我,前端需要做的是:引入厂家提供的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的值是下一个链式调用的返回值。这些问题以前都遇到过,但直接使用时经常不在意,出现这样或那样的问题。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!