vue2.0封装自己的ajax模块

Posted 2020-09-22 jihuaqiang

最近在完成公司项目，技术栈为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)
      }
    }

以上内容为本人原创，请勿转载