详解Vue整合axios的实例代码


Posted in Javascript onJune 21, 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 });
});


functionplugin(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 相关文章推荐
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
详解JavaScript的this指向和绑定
Sep 08 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 #Javascript
详解vue-cli中配置sass
Jun 21 #Javascript
详解如何在vue中使用sass
Jun 21 #Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 #Javascript
JS图片预加载插件详解
Jun 21 #Javascript
解决Extjs下拉框不显示的问题
Jun 21 #Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 #Javascript
You might like
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
利用Python实现颜色色值转换的小工具
2016/10/27 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
python调用百度REST API实现语音识别
2018/08/30 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
商务专员岗位职责
2013/11/23 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
运动会入场词60字
2014/02/15 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
大学生见习总结报告
2015/06/24 职场文书
Python学习之异常中的finally使用详解
2022/03/16 Python
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL