前端使用axios与vuex对接口和数据统一管理

下面是写这篇博客的时候项目中使用的配置

axios，vue，vuex版本

"axios": "0.17.1",
"vue": "2.5.16",	
"vuex": "3.6.0",

用法可参考官方文档：
axios：http://www.axios-js.com/zh-cn/docs/
vue：https://cn.vuejs.org/
vuex：https://vuex.vuejs.org/zh/

下面是对axios进行的二次封装service.js：

import axios from "axios"

const service = axios.create({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': 'Arch6WithCloud ' + localStorage.getItem('jwt')
    },
    timeout: 1000 * 30,
    withCredentials: true
});
// request拦截器
service.interceptors.request.use(
    config => {
        console.log("加载中");
        return config;
    },
    error => {
        console.log(error);
        Promise.reject(error);
    }
);
// response 拦截器
service.interceptors.response.use(
    response => {
        const code = response.status;
        if (code < 200 || code > 300) {
            Notification.error({
                title: response.message
            });
            return Promise.reject('error');
        } else {
            return response.data;
        }
    },
    error => {
        let code = 0;
        try {
            code = error.response.data.status
        } catch (e) {
            if (error.toString().indexOf('Error: timeout') !== -1) {
                Notification.error({
                    title: '网络请求超时',
                    duration: 2500
                });
                return Promise.reject(error)
            }
            if (error.toString().indexOf('Error: Network Error') !== -1) {
                Notification.error({
                    title: '网络请求错误',
                    duration: 2500
                });
                return Promise.reject(error)
            }
        }
        if (code === 401) {
            MessageBox.confirm(
                '登录状态已过期，您可以继续留在该页面，或者重新登录',
                '系统提示',
                {
                    confirmButtonText: '重新登录',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).then(() => {
                store.dispatch('LogOut').then(() => {
                    location.reload() // 为了重新实例化vue-router对象 避免bug
                })
            });
        } else if (code === 403) {
            router.push({path: '/401'})
        } else {
            const errorMsg = error.response.data.message;
            if (errorMsg !== undefined) {
                Notification.error({
                    title: errorMsg,
                    duration: 2500
                })
            }
        }
        return Promise.reject(error)
    }
);
export default service

封装后的使用方法：requests.js

import service from "./http";
import qs from 'qs'
import {Notification} from "element-ui";

let requests = {};

requests.dataDictionary = async function (params) {//数据字典
    let result = await service({
        url: `api/common/code/paramCodeNameList`,
        data: qs.stringify({codeType: params}),
        method: 'POST'
    });
    return result.data;
};
//响应参数判断处理
function responseProcessing(res) {
    if (res.code == 0 || res.status == 0) {
        return res.data;
    } else {
        Notification.error({
            title: '错误',
            message: res.message,
            duration: 2000
        });
        return {};
    }
}

export default requests;

vuex的使用store.js

import Vue from 'vue';
import Vuex from 'vuex';
import settlementStatus from "./modules/staticResources/settlementStatus";
Vue.use(Vuex)
const store = new Vuex.Store({
    modules: {
        settlementStatus,
    }
});
export default store;

下面是settlementStatus.js 文件

import requests from "../../../api/requests";

const settlementStatus = {
    state: {
        settlementStatus: []
    },
    actions: {
        loadSettlementStatus({commit}) {
            requests.dataDictionary('sysP_SettlementStatus').then(res => {
                console.log("结算状态加载成功")
                commit('setSettlementStatus', res)
            }).catch(err => {
                console.log("结算状态加载失败，错误信息：", err);
            })
        }
    },
    mutations: {
        setSettlementStatus(state, res) {
            state.settlementStatus = res;
        }
    },
    getters: {
        getSettlementStatus(state) {
            return state.settlementStatus;
        }
    }
};
export default settlementStatus;

在main.js中引入store.js

import store from './store/store';
new Vue({
    el: '#app',
    store,
    template: '<App/>',
    components: {App}
})

在页面中使用

1.调用vuex的方法
this.$store.dispatch('loadSettlementStatus');
2.获取vuex中的值
let settlementStatus = this.$store.getters.getSettlementStatus;

完了。