vue2.0封裝自己的ajax模組

標籤：2.0   代碼   div   route   cti   and   char   XML   default   

最近在完成公司項目，技術棧為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模組