详解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 Dialog的内存泄露问题解决方法
Jun 18 Javascript
div层的移动及性能优化
Nov 16 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
javascript填充默认头像方法
Feb 22 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
原生JS实现京东查看商品点击放大
Dec 21 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 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
php实现socket推送技术的示例
2017/12/20 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
Python运行DLL文件的方法
2020/01/17 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
行政助理岗位职责
2013/11/10 职场文书
大一军训感言
2014/01/09 职场文书
可口可乐广告词
2014/03/20 职场文书
新闻人物通讯稿
2014/10/09 职场文书
盗窃案辩护词
2015/05/21 职场文书
拉贝日记观后感
2015/06/05 职场文书