創新實訓——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)
    }
  }