最近在完成公司項目，技術棧為vue2.0+vux+vuex+webpack+echarts...另外還有vue-router及vue-loader(webpack下loader插件 可以把.vue文件 輸出成組件).

考慮將ajax封裝，目的有兩個：

1、頁面內寫法簡單，格式和國網平臺格式一致，後期無需再更改代碼

2、復用性

3、域名，端口等信息可以實現統一管理。

首先，先在components模塊內定義自己的ajax，此處使用install方法，目的是可以在main.js中使用vue.use()方法將其註入vue實例中，具體代碼如下：

export default{
  install(Vue){
    Vue.prototype.http 
 
= function (url,fn) {
      let xhr = new XMLHttpRequest()
      url="../../static/data/textDataJson/"+url;
      xhr.open("get", url, true)
      xhr.onreadystatechange = function () {
        let XMLHttpReq = xhr;
        if (XMLHttpReq.readyState == 4) {
          if (XMLHttpReq.status == 200) {
            let text 
 
= XMLHttpReq.responseText;
            let res = JSON.parse(text);
            fn(res)
          }
        }
      };
      xhr.send()
    }
  }
}

然後，在main.js中引入此模塊：

import http from ‘./components/http.js‘
Vue.use(http);

最後，在模塊的methods內引用此方法如下：

methods:{
      downLoadEveryData:function(){
        let callBack
 
=(res)=>{console.log(res);this.chartDataEvery=res;};
        this.http(‘manageRanderChart.json‘,callBack)
      }
    }

以上內容為本人原創，請勿轉載

vue2.0封裝自己的ajax模塊