详解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将页面表格导出为Excel的具体实现
Dec 27 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
发布你的Python模块详解
2016/09/15 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Python检测数据类型的方法总结
2019/05/20 Python
python解析xml简单示例
2019/06/21 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
《小草和大树》教学反思
2014/02/16 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
私人委托书格式
2014/09/10 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
nginx实现动静分离的方法示例
2021/11/07 Servers
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技