axios api 拦截器 以及 封装 get post 请求基础配置

import axios from 'axios'

import { getToken } from '@/util/saveLogin'

import configUrl from '@/util/configUrl'

import { message } from 'ant-design-vue';

const messageAttr = 'msg'

const codeAttr = 'code'

let serverSideApiUrl = configUrl?.serverSideApiUrl || 'http://localhost:8080'

let clientSideApiUrl = configUrl?.clientSideApiUrl || '/api'

// 拦截器

axios.interceptors.response.use((response) => {

    if (process.browser) { // 浏览器端

        const {

            ignoreBusiness = false, // 拒绝业务提示信息

            ignoreAll = false, // 拒绝公共显示信息

            ignoreSuccess = false, // 拒绝成功提示信息

            responseType,

        } = response.config

        if (!ignoreAll) {

            switch (response.data[codeAttr]) {

                case 200:

                    !ignoreSuccess && message.success(response.data[messageAttr] || '操作成功')

                    break

                case 400:

                    message.error(response.data[messageAttr] || '接口参数体校验失败')

                    break

                case 401:

                    message.error(response.data[messageAttr] || '登录失效')

                        // !ignoreLogin && Router.replace('/login')

                    console.log('登录失效,跳转啊')

                    break

                case 403:

                    message.warn('抱歉，您没有对应接口访问权限')

                    break

                case 500:

                    !ignoreBusiness && message.error(response.data[messageAttr] || '操作失败')

                    break

                case 501:

                    message.error(response.data[messageAttr] || '接口服务器系统异常')

                    break

                default:

                    message.error(response.data[messageAttr] || '接口服务器系统异常')

                    break

            }

        }

        // 处理文件流

        if (responseType === 'blob') {

            return response

        }




        return {

            ...response,

            success: response.data[codeAttr] === 200,

        }

    } else { // 服务器端

        const {

            ignoreAll = false, // 拒绝公共显示信息

        } = response.config

        if (!ignoreAll) {

            switch (response.data[codeAttr]) {

                case 401:

                    message.error(response.data[messageAttr] || '登录失效')

                    // !ignoreLogin && Router.replace('/login')

                    //const ctx = axios["CTX"]

                    // ctx.res.writeHead(301, {Location: `/login`})

                    // res.redirect('/login')

                    // ctx.res.end()

                    // response.redirect('/login')

                    break

                default:

                    message.error(response.data[messageAttr] || '接口服务器系统异常')

                    break

            }

        }

        return response

    }

}, (error) => {



    if (process.browser) {

        const { response, code } = error

        if (response) {

            switch (response.status) {

                case 404:

                    message.error('404，无效的请求')

                    break

                case 500:

                    message.error('500，服务器拒绝')

                    break

                case 504:

                    message.error('接口访问超时，请刷新重试')

                    break

                default:

                    message.error('接口服务器系统异常')

                    break

            }

        } else if (code === 'ECONNABORTED') {

            message.error('接口服务器无响应，请刷新重试')

        }

        return {

            error: 1,

            success: false,

        }



    }

    return Promise.reject(error)

})

axios.interceptors.request.use((config) => {

    let token = '';

    if (process.browser) { // 客服端请求

        token = getToken() || '';

        config.baseURL = clientSideApiUrl; // '/requestApi + url '

       

    } else { // 服务端请求

        token = axios['Login_Token'] || ''; // http://192.168.1.161:8097/+ url

        config.baseURL = serverSideApiUrl;

    }



    config.headers['Accept'] = 'application/vnd.dpexpo.v1+json';

    config.headers['token'] = token;

    config.timeout = 60000;

    return config;

}, (error) => {

    return Promise.reject(error)

})



// axios的get请求

export function getAxios(

    url,

    data = {},

    config = {},

) {

    return new Promise((resolve, reject) => {

        axios.get(url, {

            params: data,

            ...config,

        }).then(res => {

            resolve(res)

        }).catch(err => {

            console.log(err, '1')

            reject(err)

        })

    })

}



// axios的post请求

export function postAxios(

    url,

    data = {},

    config = {},

) {



    return new Promise((resolve, reject) => {

        axios({

            url,

            method: 'post',

            ...data,

            ...config

        }).then(res => {

            resolve(res)

        }).catch(err => {

            reject(err)

        })

    })

}



export default axios;

使用 get  post 时候 

import { getAxios, postAxios } from "@/request/request";

//get
export const getList = (data) => {
  return getAxios(`/xxxxxx/getList`, data, { ignoreSuccess: true });
}
//post
export const postForm = (data) => {
  return postAxios(`/xxxxx/postForm`, {data:data}, { ignoreSuccess: true });
}