详解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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
网页自动跳转代码收集
Sep 27 Javascript
jquery动态添加option示例
Dec 30 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
Highcharts入门之简介
Aug 02 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
React全家桶环境搭建过程详解
May 18 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 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
js 编写规范
2010/03/03 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
详解在Python程序中自定义异常的方法
2015/10/16 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
python list的index()和find()的实现
2020/11/16 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
四风查摆问题自查报告
2014/10/10 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
趣味运动会赞词
2015/07/22 职场文书