详解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 相关文章推荐
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
Javascript实现信息滚动效果
May 18 Javascript
微信小程序定位当前城市的方法
Jul 19 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 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 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
Python切片用法实例教程
2014/09/08 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
python之拟合的实现
2019/07/19 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
python打印异常信息的两种实现方式
2019/12/24 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
Python插件机制实现详解
2020/05/04 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
教师绩效考核方案
2014/01/21 职场文书
学生鉴定评语大全
2014/05/05 职场文书
课例研修方案
2014/05/31 职场文书
死亡证明书样本说明
2014/10/18 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
最感人的道歉情书
2015/05/12 职场文书
初中政治教学工作总结
2015/08/13 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书