详解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 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 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
星际争霸任务指南——神族
2020/03/04 星际争霸
PHP SQLite类
2009/05/07 PHP
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
python编写弹球游戏的实现代码
2018/03/12 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
python学生信息管理系统实现代码
2019/12/17 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
施工员岗位职责
2014/03/16 职场文书
租房协议书范文
2014/08/20 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
庆祝教师节主持词
2015/07/06 职场文书
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
Win11软件图标固定到任务栏
2022/04/19 数码科技