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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
如何在JS文件中获取Vue组件
Sep 16 Javascript
js实现电灯开关效果
Jan 19 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
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递归实现汉诺塔问题的方法示例
2017/11/25 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
Python内置数据类型详解
2014/08/18 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python实现猜拳小游戏
2020/04/05 Python
python内打印变量之%和f的实例
2020/02/19 Python
python实现翻译word表格小程序
2020/02/27 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
读群众路线的心得体会
2014/09/03 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
golang为什么要统一错误处理
2022/04/03 Golang
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang