Vue开发中整合axios的文件整理
2017-04-29 11:52
1086 查看
前言
大家在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 }); }); function plugin(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); }); } }
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章推荐
- vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发
- vue开发:axios的post请求接口出现404,但是get则成功
- vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发
- 详解Vue整合axios的实例代码
- vue-cli 使用axios的操作方法及整合axios的多种方法
- iOS开发中的错误整理,pod文件Install失败
- 【vue】element、vue2.0+、vuex、axios开发中遇到的坑点
- vue 开发:axios前后端数据处理
- vue开发:axios前后端数据处理
- iOS开发中遇到的错误整理 - 集成第三方框架时,编译后XXX头文件找不到
- IOS项目开发规范--文件树整理
- 【iOS-cocos2d-X 游戏开发之七】整合Cocos2dX的Android项目到Xcode项目中,Android导入打包运行即可! 推荐
- iOS开发2:读取plist文件
- 苹果正开发iTunes 11:支持iOS 6整合iCloud
- IOS 开发环境,证书和授权文件是什么?
- iOS开发笔记:大小写敏感的iOS文件系统,而iOS模拟器竟然对大小写不敏感
- IOS开发技术之──头文件引用(@class/#import/#include)
- iOS开发之结合asp.net webservice实现文件上传下载
- php开发支持的文件类型整理
- iOS开发之结合asp.net webservice实现文件上传下载