Vue开发中整合axios的文件整理

网友投稿 196 2023-05-19


Vue开发中整合axios的文件整理

前言

大家在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 './fFKgrNpslilters';

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, storhttp://e };

在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);

});

}

}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Java栈之链式栈存储结构的实现代码
下一篇:Vue实现动态响应数据变化
相关文章

 发表评论

暂时没有评论,来抢沙发吧~