同学，请实现一个扫码登录

马上要到春节了，小伙伴们的公司是不是已经可以申请请假调休呢？虽然今年刚入职没有年假(好像国家不是这么规定的，但也不好跟公司硬杠)，大小周的我已经攒了 7 天调休，也可以提前回家过年啦！

即使是年底，打工人的工作量也没有减少，最近 leader 扔给我一个扫码登录的需求，我一看有点来劲了。一来做了多年前端，类似的需求还没有接触过，平时做的多的页面需求和改改 bug 对自身能力显然是无法提升的。二来扫码登录的功能很多应用都有做过，常见的微信扫码登录，也挺好奇具体如何实现。我大概看了一遍需求文档，写的挺详细的，流程图也标明了各端的交互流程。由于内网开发，产品流程图也忘记截图了，此处在网上找到的一个大概的流程图：

主要涉及到的是 pc 端、手机端和后台服务端。由于听产品同事说手机端由原生端（安卓和 IOS）来实现，因此我这边只需要开发 pc 端就行，工作量直接减半有没有。做过该功能的小伙伴肯定了解，pc 端的实现还是比较简单的，主要就是开启轮询查询后台扫码状态，然后做对应的提示或登录成功后跳转首页。

扫码登录的需求在前端主要难点在轮询上

0. 什么叫轮询？

所谓的轮询就是，由后端维护某个状态，或是一种连续多篇的数据（如分页、分段），由前端决定按序访问的方式将所有片段依次查询，直到后端给出终止状态的响应（结束状态、分页的最后一页等）。

1. 轮询的方案？

一般有两种解决方案：一种是使用websocket，可以让后端主动推送数据到前端；还有一种是前端主动轮询（上网查了下细分为长轮询和短轮询），通过大家熟悉的定时器（setInterval和setTimeout）实现。

由于项目暂未用到websocket，且长轮询需要后台配合，所以直接采用短轮询（定时器）开撸了。

遇到的问题：

1、由于看需求文档上交互流程比较清晰，最开始没去网上查找实现方案，自己直接整了一版setInterval的轮询实现。在跟后台联调的过程中发现定时器每 1s 请求一次接口，发现很多接口没等响应就开启下一次的请求，很多请求都还在 pending 中，这样是不对的，对性能是很大消耗。于是想了下，可以通过setTimeout来优化，具体就是用setTimeout递归调用方式模拟setInterval的效果，达到只有上一次请求成功后才开启下一次的请求。

// 开启轮询async beginPolling() {if (this.isStop) return;try {const status = await this.getQrCodeStatus();if (!status) return;this.codeStatus = status;switch(this.codeStatus) {case '2':this.stopPolling();// 确认登录后，需前端修改状态this.codeStatus = '5';this.loading = true;// 走登录逻辑this.$emit('login', {qrcId: this.qrcId,encryptCSIIStr: this.macAddr})break;case '3':// 取消登录this.stopPolling();await this.getQrCode();break;case '4':// 二维码失效this.stopPolling();break;default:break;}this.timer = setTimeout(this.beginPolling);} catch(err) {console.log(err);this.stopPolling();}},

2、在自测了过程中又发现了另外一个问题，stopPolling方法中clearTimeout似乎无法阻止setTimeout的执行，二维码失效后请求仍在不停发出，这就很奇怪了。上网搜索了一番，发现一篇文章(很遗憾，已经找不到是哪篇文章了！)记录了这个问题：大概意思是虽然 clearTimeout 已经清除了定时器，但此时有请求已经在进行中，导致再次进入了循环体，重新开启了定时器。解决办法就是，需要手动声明一个标识位isStop来阻止循环体的执行。

    stopPolling() {if (this.timer) {clearTimeout(this.timer);this.timer = null;// 标记终止轮询(仅clearTimeout无法阻止)this.isStop = true;}},

试了下确实达到效果了，但其实这个问题产生的具体原因我还是有些模糊的，希望遇到过相关问题的大佬能指点一下，感激不尽！

3、解决了上面提到的问题，就在以为万事大吉，只待提测的时候。后台同事发现了一个问题（点赞后台同事的尽责之心）：他在反复切换登录方式（扫码登录<->账号密码登录）的过程中，发现后台日志有一段时间打印的qrcId不是最新的。然后我这边试了下，确实在切换频率过高时，此时有未完成的请求仍在进行中，导致qrcId被重新赋值了。虽然已经在beforeDestroy里调用了stopPolling清除定时器,但此时请求是未停止的。聪明的小伙伴们肯定想到axios的cancelToken可以取消未完成的请求，但我实际也并没有用过，而且项目里也没有可以表演Ctrl+C和Ctrl+V的地方。于是百度了一番，找到一篇掘友的文章，为了表示尊敬我原封不动的搬到我的代码里了，哈哈！

import axios from "axios";
const CancelToken = axios.CancelToken;const cancelTokenMixin = {data() {return {cancelToken: null, // cancelToken实例cancel: null, // cancel方法};},created() {this.newCancelToken();},beforeDestroy() {//离开页面前清空所有请求this.cancel("取消请求");},methods: {//创建新CancelTokennewCancelToken() {this.cancelToken = new CancelToken((c) => {this.cancel = c;});},},
};
export default cancelTokenMixin;

掘友文章[：](在 vue 项目中取消 axios 请求（单个和全局） - 掘金 (juejin.cn))

在组件里引入 mixin，另外在请求时传入cancelToken实例，确实达到效果了。此时再次切换登录方式，之前的未完成的请求已被取消，也就无法再篡改qrcId。写到此处，我发现问题 2 也是未完成的请求导致的，那么是否可以不用isStop标识，直接在stopPolling中调用this.cancel("取消请求");不是更好吗？

完整代码如下：

import sunev from 'sunev'; // 全局公共方法库
import cancelTokenMixin from "@/utils/cancelTokenMixin"; // axios取消请求export default {props: {loginType: {type: String,default: 'code'}},mixins: [cancelTokenMixin],data() {return {qrcId: '', // 二维码标识qrcBase64: '', // 二维码base64图片macAddr: '', // mac地址loading: false,isStop: false,codeStatus: '0',qrStatusList: [{status: '-1',icon: 'error',color: '#ed7b2f',svgClass: 'icon-error-small',text: '二维码生成失败\n请刷新重试',refresh: true},{ status: '0', icon: '', text: '', refresh: false },{status: '1',icon: 'scan',color: '#2986ff',svgClass: 'icon-scan-small',text: '扫描成功\n请在移动端确认',refresh: false},{status: '2',icon: 'confirm',color: '#2986ff',svgClass: 'icon-confirm-small',text: '移动端确认登录',refresh: false},{status: '3',icon: 'cancel',text: '移动端已取消',refresh: false},{status: '4',icon: 'error',color: '#ed7b2f',svgClass: 'icon-error-small',text: '二维码已失效\n请刷新重试',refresh: true},{status: '5',icon: 'success',color: '#2986ff',svgClass: 'icon-success-small',text: '登录成功',refresh: false},{status: '6',icon: 'error',color: '#ed7b2f',svgClass: 'icon-error-small',text: '登录失败\n请刷新重试',refresh: true}],errMsg: ''}},async created() {try {await this.getQrCode();this.beginPolling();} catch(err) {console.log(err);}},computed: {// 当前状态curQrStatus() {const statusObj = this.qrStatusList.find(item => item.status === this.codeStatus);if (this.errMsg) {statusObj.text = this.errMsg;}return statusObj;}},methods: {// 开启轮询async beginPolling() {if (this.isStop) return;try {const status = await this.getQrCodeStatus();if (!status) return;this.codeStatus = status;switch(this.codeStatus) {case '2':this.stopPolling();// 确认登录后，需前端修改状态this.codeStatus = '5';this.loading = true;// 走登录逻辑this.$emit('login', {qrcId: this.qrcId,encryptCSIIStr: this.macAddr})break;case '3':// 取消登录this.stopPolling();await this.getQrCode();break;case '4':// 二维码失效this.stopPolling();break;default:break;}this.timer = setTimeout(this.beginPolling);} catch(err) {console.log(err);this.stopPolling();}},// 暂停轮询stopPolling() {if (this.timer) {clearTimeout(this.timer);this.timer = null;// 标记终止轮询(仅clearTimeout无法阻止)this.isStop = true;}},// 获取二维码base64async getQrCode() {this.reset();this.loading = true;try {const params = {encryptCSIIStr: this.macAddr}const res = await sunev.$https.post('sunev/LoginQRCGen',{ isLoading: false, cancelToken: this.cancelToken },params)if (res.qrcId) {this.qrcId = res.qrcId;this.qrcBase64 = res.qrcBase64;} else {this.stopPolling();}} catch(err) {this.errMsg = err.message;this.stopPolling();}},// 获取二维码状态async getQrCodeStatus() {try {const params = {encryptCSIIStr: this.macAddr}const res = await sunev.$https.post('sunev/LoginQRCQry',{ isLoading: false, cancelToken: this.cancelToken },params)return res.status;} catch(err) {this.stopPolling();}},// 刷新二维码async refresh() {await this.getQrCode();this.beginPolling();},// 切换登录类型toggle() {this.$emit('toggleLoginType');},// 重置reset() {this.isStop = false;this.codeStatus = '0';this.errMsg = '';},beforeDestroy() {this.stopPolling();}}
}

ps：

1、由于是老项目了，登录界面逻辑较多，避免臃肿，二维码登录拆分成单独组件实现

2、由于项目组在内网开发，以下代码都是一行行重新手打的，不是很重要的 html 和 css 部分就省略了

后记：

由于此需求并不着急上线，暂未提测，所以还不知测试同事会提出怎样的 bug。另外掘友们如果发现问题，也欢迎批评指正，感激不尽！