vue2.0封装自己的ajax模块

Posted jihuaqiang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2.0封装自己的ajax模块相关的知识,希望对你有一定的参考价值。

最近在完成公司项目,技术栈为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模块的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0 代码功能片段

vue2.0自学笔记

vue2.0的变化

Vue2.0笔记——Ajax,JSONP跨域

vue2.0的ajax

vue2.0有哪些变化