创新实训——007

本篇介绍Vue.js（以下简称vue）的前端请求

axios

vue目前官方推荐使用axios来进行数据请求，axios是一个基于 promise 的 HTTP 库，简单来说就是可以发送get、post请求（因为我只用到了这些hh），看到网上有人总结axios的特点如下：

1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应 （就是有interceptor）
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF

promise是为了解决异步请求中的地狱回调问题
所谓的地狱回调就是这种：

this.axios.get(url)
      .then(function(res){
      this.axios.get(url)
      .then(function(res){
              this.axios.get(url)
              .then(function(res){
              ……
              })
	  })
})

因为请求返回和操作是异步的所以有些操作可能就必须等到请求返回时才能进行，这样就可能会出现上述的地狱回调，而promise就是对异步请求的结果进行封装后程序可以不用嵌套编写，可以用同步的形式来继续编写，如下所示：

var promise = new Promise((resolve,reject)=>{
        this.get(url1,{})
        .then((res)=>{
            resolve(res);
        })
        .catch((err)=>{
            console.log(err)
        })
    });
    promise.then((res)=>{
        this.get(url2,{})
        .then((res)=>{
            resolve(res);
        })
        .catch((err)=>{
            console.log(err)
        })
    })

这样url2的请求也是需要先等到url1的请求结果返回后才可以调用，但是这样就避免了嵌套，因为嵌套的代码真得很不好维护。
因为我数据嵌套层数不多或者可以说基本不需要嵌套，所以就没有使用promise这种机制。因为我的数据组合基本上是在后端组合的，但是这样也有一个缺点，就是后端灵活度不高，需要编写大量的接口，不好维护，但是这样速度快。
下面介绍在vue中如何使用axios：

//先安装
npm install axios --save
npm install vue-axios --save
这里为啥要安装vue-axios，因为axios并不是vue的插件，所以引入vue-axios后，将其与axios绑定，就可以像插件一样使用axios，非常方便
//全局引入（main.js中）
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)
//使用例子
var _this=this;
this.axios.get('http://localhost:8090/getDataForTheLogTable?ogPara='+this.logPara)
.then(function(res){
     _this.tableData=res.data//将请求到的值赋予表格
 })
 //当然这是没有使用promise机制的

websocket

websocket机制一般用于实时回显，这里我是将一些统计数据通过websocket从前端每隔一定时间传给前端，然后前端更新，有关flask和vue中websocket的使用在第3篇博客中已经介绍过了，重点强调vue端要使用socket.io-client，不要用vue-socket.io，这个不知道为啥就是配置不好。
websocket采用的是长连接的方式，还有一种是通过定时器轮询的方式来获取实时数据，但是这里我并不想用，因为我感觉代价有些大，具体定时器咋使用我以实时显示当前时间为例。

//首先需要在data中设置定时器对象
data () {
    return {
      date: '------------------',
      //socket:null
      timeStopper:null//设置定时器对象
    }
  }
 //然后在mounted()阶段启动定时器，写法如下：
 mounted(){
    var _this=this
    this.timeStopper=setInterval(function(){
      _this.date=new Date().toLocaleString();
    },1000)//这里以ms为单位
  }
//注意在beforeDestroy()阶段要清除定时器，否则再进入页面时会新开定时器，造成页面卡死
beforeDestroy(){
    if(this.timeStopper){
      clearInterval(this.timeStopper)
    }
  }