千家信息网

Vue开发中怎么整合axios文件

发表于:2025-01-24 作者:千家信息网编辑
千家信息网最后更新 2025年01月24日,今天小编给大家分享一下Vue开发中怎么整合axios文件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们
千家信息网最后更新 2025年01月24日Vue开发中怎么整合axios文件

今天小编给大家分享一下Vue开发中怎么整合axios文件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

整合方法

整合文件axios.js

import axios from 'axios';// 适配vue-resourceconst 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);});}}

以上就是"Vue开发中怎么整合axios文件"这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注行业资讯频道。

0