Vue开发中整合axios的文件整理


Posted in Javascript onApril 29, 2017

前言

大家在vue日常开发中,不可避免要整合axios,这里简单记录一下整合中的文件,方便以后使用查找。下面来看看详细的介绍。

整合方法

整合文件axios.js

import axios from 'axios';
// 适配vue-resource
const instance = axios.create();
instance.interceptors.request.use(config=> {
//Serialize.decode(config);
return config;
});
instance.interceptors.response.use(response=> {
return response.data;
}, err=> {
if (err.response) {
axios.post('/v1/error', err.response);
return Promise.reject(err.response.data);
}
return Promise.reject({ code: 1024, message: err.message });
});
function plugin(Vue) {
if (plugin.installed) {
return;
}
Vue.http = instance;
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(plugin);
}
export default plugin;

vue插件使用 app.js

import Vue from 'vue';
import App from './App.vue';
import store from './store';
import { sync } from 'vuex-router-sync';
import router from './router';
import * as filters from './filters';
import yxui from 'yxui/dist/yxui.min';
import axios from './axios';
Vue.use(yxui);
Vue.use(axios);
// sync the router with the vuex store.
// this registers `store.state.route`
sync(store, router);
// register global utility filters.
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]);
});
// create the app instance.
// here we inject the router and store to all child components,
// making them available everywhere as `this.$router` and `this.$store`.
const app = new Vue({
router,
store,
...App
});
// expose the app, the router and the store.
// note we not mounting the app here, since bootstrapping will be
// different depending on whether we are in browser or on the server.
export { app, router, store };

在vuex action 中使用:

actions: {
// adList
[TypesAds.AD_GET_LIST](ctx, params){
return Vue.http.get('/v1/api/ads/list', {params}).then(data=> {
ctx.commit(TypesAds.AD_GET_LIST, data);
return data;
}).catch(err=> {
//统一错误处理
Vue.$message.error(err.msg);
});
}
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
js实现电灯开关效果
Jan 19 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 #Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 #jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 #jQuery
jQuery设置图片等比例缩小的方法
Apr 29 #jQuery
Angular2下使用pdf插件的方法详解
Apr 29 #Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 #Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 #jQuery
You might like
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
php中的依赖注入实例详解
2019/08/14 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
python获取外网IP并发邮件的实现方法
2017/10/01 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
勾股定理课后反思
2014/04/26 职场文书
服务承诺书格式
2014/05/21 职场文书