详解Vue整合axios的实例代码

网友投稿 383 2023-05-06


详解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 });

});

functionplugin(Vue){

if (plugin.installed) {

return;

}

Vue.http = instance;

}

if (typeof window !== 'undefined' && window.mGgPNiBSVue) {

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 stomGgPNiBSre.

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

});

}

}


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

上一篇:测试常用的mock数据工具(mock测试方法)
下一篇:详解如何在vue中使用sass
相关文章

 发表评论

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