首页 > 代码库 > vue2.0封装自己的ajax模块
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模块
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。