详解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 相关文章推荐
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
May 14 Javascript
JavaScript DOM 添加事件
Feb 14 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
div模拟选择框示例代码
Nov 03 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
JS原型链怎么理解
Jun 27 Javascript
懒加载实现的分页&&网站footer自适应
Dec 21 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
Node.js fs模块原理及常见用途
Oct 22 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
一个php作的文本留言本的例子(六)
2006/10/09 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
php生成无限栏目树
2017/03/16 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
js验证密码强度解析
2020/03/18 Javascript
django 常用orm操作详解
2017/09/13 Python
Python3进制之间的转换代码实例
2019/08/24 Python
Python自省及反射原理实例详解
2020/07/06 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
525心理活动总结
2014/07/04 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
施工现场安全管理制度
2015/08/05 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
Python利用capstone实现反汇编
2022/04/06 Python
vue实现列表垂直无缝滚动
2022/04/08 Vue.js
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js