扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家分享的是有关Vue如何整合axios的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
宁强ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!
在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); }); } }
感谢各位的阅读!关于“Vue如何整合axios”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流