Vue封装axios

本文借鉴antd vue pro规范，好的规范能很大程度减少bug的产生

request.js

import axios from 'axios'
import Cookie from 'js-cookie'

// 跨域认证信息 header 名，根据自己业务自定义
const xsrfHeaderName = 'token'

axios.defaults.timeout = 5000
axios.defaults.withCredentials = true
axios.defaults.xsrfHeaderName = xsrfHeaderName
axios.defaults.xsrfCookieName = xsrfHeaderName

// http method
const METHOD = {
    GET: 'get',
    POST: 'post'
}

/**
 * axios请求
 * @param url 请求地址
 * @param method {METHOD} http method
 * @param params 请求参数
 * @returns {Promise<AxiosResponse<T>>}
 */
async function request(url, method, params, config) {
    switch (method) {
        case METHOD.GET:
            return axios.get(url, { params, ...config })
        case METHOD.POST:
            return axios.post(url, params, config)
        default:
            return axios.get(url, { params, ...config })
    }
}
// 设置token调用此函数
function setAuthorization(token) {
    Cookie.set(xsrfHeaderName, token)
    // axios.defaults.headers.common["token"] = token
}

/**
 * 移出认证信息
 * @param authType {AUTH_TYPE} 认证类型
 */
function removeAuthorization() {
    Cookie.remove(xsrfHeaderName)
}

/**
 * 检查认证信息
 * @param authType
 * @returns {boolean}
 */
function checkAuthorization() {

    if (Cookie.get(xsrfHeaderName)) {
        return true
    }
    return false
}

/**
 * 加载 axios 拦截器
 * @param interceptors
 * @param options
 */
function loadInterceptors(interceptors, options) {
    const { request, response } = interceptors
    // 加载请求拦截器
    request.forEach(item => {
        let { onFulfilled, onRejected } = item
        if (!onFulfilled || typeof onFulfilled !== 'function') {
            onFulfilled = config => config
        }
        if (!onRejected || typeof onRejected !== 'function') {
            onRejected = error => Promise.reject(error)
        }
        axios.interceptors.request.use(
            config => onFulfilled(config, options),
            error => onRejected(error, options)
        )
    })
    // 加载响应拦截器
    response.forEach(item => {
        let { onFulfilled, onRejected } = item
        if (!onFulfilled || typeof onFulfilled !== 'function') {
            onFulfilled = response => response
        }
        if (!onRejected || typeof onRejected !== 'function') {
            onRejected = error => Promise.reject(error)
        }
        axios.interceptors.response.use(
            response => onFulfilled(response, options),
            error => onRejected(error, options)
        )
    })
}

/**
 * 解析 url 中的参数
 * @param url
 * @returns {Object}
 */
function parseUrlParams(url) {
    const params = {}
    if (!url || url === '' || typeof url !== 'string') {
        return params
    }
    const paramsStr = url.split('?')[1]
    if (!paramsStr) {
        return params
    }
    const paramsArr = paramsStr.replace(/&|=/g, ' ').split(' ')
    for (let i = 0; i < paramsArr.length / 2; i++) {
        const value = paramsArr[i * 2 + 1]
        params[paramsArr[i * 2]] = value === 'true' ? true : (value === 'false' ? false : value)
    }
    return params
}

export {
    METHOD,
    AUTH_TYPE,
    request,
    setAuthorization,
    removeAuthorization,
    checkAuthorization,
    loadInterceptors,
    parseUrlParams
}

axios-interceptors.js

import Cookie from 'js-cookie'
//借用antd-design-vue信息组件进行错误提示
import {message} from "ant-design-vue"
// 401拦截
const resp401 = {
  /**
   * 响应数据之前做点什么
   * @param response 响应对象
   * @param options 应用配置 包含: {router, i18n, store, message}
   * @returns {*}
   */
  onFulfilled(response, options) {
    if (response.code === 401) {
      message.error('无此权限')
    }
    return response
  },
  /**
   * 响应出错时执行
   * @param error 错误对象
   * @param options 应用配置 包含: {router, i18n, store, message}
   * @returns {Promise<never>}
   */
  onRejected(error, options) {
    const {response} = error
    if (response.status === 401) {
      message.error('无此权限')
    }
    return Promise.reject(error)
  }
}

const resp403 = {
  onFulfilled(response, options) {
    if (response.code === 403) {
      message.error('请求被拒绝')
    }
    return response
  },
  onRejected(error, options) {
    const {response} = error
    if (response.status === 403) {
      message.error('请求被拒绝')
    }
    return Promise.reject(error)
  }
}

const reqCommon = {
  /**
   * 发送请求之前做些什么
   * @param config axios config
   * @param options 应用配置 包含: {router, i18n, store, message}
   * @returns {*}
   */
  onFulfilled(config) {
    const {url, xsrfCookieName} = config
    if (url.indexOf('login') === -1 && xsrfCookieName && !Cookie.get(xsrfCookieName)) {
      message.warning('认证 token 已过期，请重新登录')
    }
    return config
  },
  /**
   * 请求出错时做点什么
   * @param error 错误对象
   * @param options 应用配置 包含: {router, i18n, store, message}
   * @returns {Promise<never>}
   */
  onRejected(error) {
    message.error(error.message)
    return Promise.reject(error)
  }
}

export default {
  request: [reqCommon], // 请求拦截
  response: [resp401, resp403] // 响应拦截
}

request.js与axios-interceptors.js放在utils文件夹中

在src下新建services文件夹，并在其中新建api.js用于集中管理请求路径，index.js用于导出所有接口。如下

api.js

const BASE_URL = "your ip"
module.exports = {
    // 开门记录
    OPENDOORRECORD: `${BASE_URL}/deviceEvent/openDoorRecord`
    }

接口定义

在services文件夹以相应模块名建js，如user.js

import API from "@/services/platform-api";
import { request, METHOD } from "@/utils/request";

/**
 * 获取组织机构列表
 */
 export function getOrgList(obj) {
    return request(API.ORGLIST, METHOD.POST, obj);
}

export default{
    getOrgList
}

导出接口 index.js

import userService from "./user"
export {
   userService
}

接下来就可以在页面中使用。