Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to integrate axios files in Vue development

2025-02-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Internet Technology >

Share

Shulou(Shulou.com)05/31 Report--

今天小编给大家分享一下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文件"这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注行业资讯频道。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Internet Technology

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report