vue 对axios和api请求的封装处理

axios的封装

import axios from "axios"
import store from "@/store"
import { getToken } from "@/utils/auth"
import { Modal } from "ant-design-vue"

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 10000, // request timeout
})

// request interceptor
service.interceptors.request.use(
  (config) => {
    // do something before request is sent
    if (store.getters.token) {
      config.headers["X-Access-Token"] = getToken()
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
   */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  (response) => {
    const res = response.data

    // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
    if (res.code == 200) {
      return res
    } else if (res.code === 401) {
      return Promise.reject(new Error(res.message || "Error"))
    } else {
      if (res.code === 800) {
        Modal.error({
          title: "登录已过期",
          content: "很抱歉，登录已过期，请重新登录",
          okText: "重新登录",
          mask: false,
          onOk: () => {
            store.dispatch("resetToken").then(() => {
              // window.location.reload()
              window.location.href = "/"
            })
          },
        })
      }

      return res
    }
  },
  (error) => {
    //console.log('err' + error) // for debug
    if (error.response) {
      // console.log(error.response)
      // if (error.response.status === 500) {
      //   if (store.getters.token && error.response.data.message.indexOf('Token失效，请重新登录')) {
      //   }
      // }
    } else {
      // Message({
      //   message: error.message,
      //   type: 'error',
      //   duration: 5 * 1000
      // })
    }
    return Promise.reject(error)
  }
)

export default service

请求方法的封装

import request from '@/utils/request'


//post
export function postAction(url,parameter) {
  return axios({
    url: url,
    method:'post' ,
    data: parameter
  })
}
//post
export function postFormAction(url,parameter) {
  return axios({
    url: url,
    method:'post' ,
    params: parameter
  })
}

//post method= {post | put}
export function httpAction(url,parameter,method) {
  return axios({
    url: url,
    method:method ,
    data: parameter
  })
}

//put
export function putAction(url,parameter) {
  return axios({
    url: url,
    method:'put',
    data: parameter
  })
}

//get
export function getAction(url,parameter) {
  return axios({
    url: url,
    method: 'get',
    params: parameter
  })
}

//deleteAction
export function deleteAction(url,parameter) {
  return axios({
    url: url,
    method: 'delete',
    params: parameter
  })
}

export function getUserList(parameter) {
  return axios({
    url: api.user,
    method: 'get',
    params: parameter
  })
}

export function getRoleList(parameter) {
  return axios({
    url: api.role,
    method: 'get',
    params: parameter
  })
}

export function getServiceList(parameter) {
  return axios({
    url: api.service,
    method: 'get',
    params: parameter
  })
}

export function getPermissions(parameter) {
  return axios({
    url: api.permissionNoPager,
    method: 'get',
    params: parameter
  })
}

// id == 0 add     post
// id != 0 update  put
export function saveService(parameter) {
  return axios({
    url: api.service,
    method: parameter.id == 0 ? 'post' : 'put',
    data: parameter
  })
}

/**
 * 下载文件 用于excel导出
 * @param url
 * @param parameter
 * @returns {*}
 */
export function downFile(url,parameter){
  return axios({
    url: url,
    params: parameter,
    method:'get' ,
    responseType: 'blob'
  })
}

/**
 * 获取文件访问路径
 * @param avatar
 * @param imgerver
 * @param str
 * @returns {*}
 */
export function getFileAccessHttpUrl(avatar,imgerver,subStr) {
  if(avatar && avatar.indexOf(subStr) != -1 ){
    return avatar;
  }else{
    return imgerver + "/" + avatar;
  }
}

api

import { getAction,deleteAction,putAction,postAction,postFormAction} from '@/api/manage'
const duplicateCheck = (params)=>getAction("/sys/duplicate/check",params);
export {
  duplicateCheck 
}