详解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 相关文章推荐
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
elementui实现预览图片组件二次封装
Dec 29 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
详解在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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python批量下载抖音视频
2019/06/17 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
python turtle 绘制太极图的实例
2019/12/18 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
应届生法律顾问求职信
2013/11/19 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
德育标兵事迹材料
2014/08/24 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
基层党建工作简报
2015/07/21 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python