扫码登录的实现方式

扫码登录过程：前端生成二维码，在登录页面等待用户扫码，用户扫码后判断扫码结果做下一步操作（成功：跳转首页，失败：提示用户）。为了即时知晓用户扫码结果，有三种方式来查询结果

1. 短轮询

实现：这种方式非常简单，写了一个定时器每间隔n秒向服务器发送http请求来查询用户扫码情况。
弊端：扫码后用户要等n秒才会页面感知，多久请求一次合适呢？频率太高会导致服务器压力大，如果放低页面感知的及时性就会降低。适合对实时性要求不高的场景！如在线聊天，天气更新等。有一点延时对用户体验不会造成重大影响。

 this.timmer = setInterval(async () => {
 		 const { data: res } = axios.post(...)  // 网络请求
 		 if(res.code === '扫码成功的code'){
 		 	 clearInterval(this.timmer)
             this.timmer = null
             this.$router.push('/home')
 		 }else if(res.code === "二维码失效code"){
 		     clearInterval(this.timmer)
             this.timmer = null
             // 刷新二维码
 		 }
 })

2. 长轮询

原理：客户端发送请求，如果服务端的数据没有发生变更，那么就hold住请求不返回结果，直到服务器端的数据发生了变更，或者达到了一定的时间就会返回，这样就减少了客户端和服务器不断链接和传递数据的过程，并且不会消耗服务端太多资源。（ps：需要服务端配合）
实现：轮询就是在发送第一次请求的时候，如果返回数据了那么就「在成功的回调里面再次发起这个请求」，就像递归一样，调用本方法。如果时间太久，「超时异常，同样的在失败回调里再次请求」，长轮询也「需要后台配合和约定」，如果没有数据的时候就不用返回。
好处是：减少了不必要的网络流量和请求次数，降低了服务器和客户端的资源消耗。
弊端是：实现更加复杂，并且需要服务器支持长时间保持连接的能力。适合对实时性要求较高的场景！如在线游戏，即时消息推送等。

 longReq() {
      const { data: res } = this.$http.get('XXXXXX').catch(() => {
        // 异常，连接超时，继续轮询
        this.longReq()
      })
      if (res.code === 204) {
        // 没有变化，继续轮询
        this.longReq()
      } else if (res.code === 200) {
        // 有变化，判断返回结果，做下一步操作
        // todo
      }
    }

3. websocket

TCP长连接。 即时通信，就是注意要在断了的时候，要做一个重连。