Vue中Axios的封装管理

封装request.js

• 创建单独文件来封装axios,并且要和后端约定好请求协议和域名、请求头、状态码、超时时间
• 引入ElementUI中的Message,方便UI中提示信息

import axios from 'axios'
import {Message} from 'element-ui'
const request = axios.create({
    baseURL: '协议域名',
    timeout：'5000'
})

//请求拦截
request.interceptors.request.use(
    config => {
        let token = JSON.parse(window.localStorage.getItem('header')).token
        //配置请求头
        token && (config.headers['X-Access-Token'] = token)
        return config
    },
    error => Promise.reject(error)
)

//响应拦截
request.interceptors.response.use(
    response => {
        if(response.status == 200)
            Promise.resolve(response)
        else
            Promise.reject(response)
    },
    error => {
        const {response} = error
        if(response){
            //判断状态码做相应操作
            if(response.status == 401 || response.status == 403){
                Message({
                    type: 'error',
                    message: response.data.message
                })
                //移除header
                winndow.localStorage.removeItem('header')
                //跳转登录页
                window.location.herf='/'
            }else if(resposne.status==404){
                Message({
                    type: 'error',
                    message: '接口不存在'
                })
            }
            return Promise.reject(error)
        }
        
    }
)
export default request

封装业务模块请求

所有接口请求都写到api.js中

• 须引入request.js

import request from '@/utils/request'

export const getCompanyparam = (params) => {
    return request({
        url: 'xxx',
        method: 'get',
        params
    })
}

export const updateCompanyParam = (data) => {
    return request({
        url: 'companyparams/modifyCompanyParams',
	method: 'xxx',
	data
    })
}

业务组件调用请求

按需引入api.js中的模块

import {getCompanyparam , updateCompanyParam} from '@/api'
methods:{
    queryCompanyparam(){
        getCompanyparam(params).then(res={
            console.log(res.data)
            //....业务需求
        })
    }
}