vue项目中axios的封装

1、config.js文件

export default {
  /**
   * 路由模式hash or history
   */
  mode: "hash",
  /**
   * 请求超时
   */
  timeout:20*1000,
  /**
   * 请求公共路径
   */
  baseUrl:process.env.NODE_ENV === 'development' ? '' : window.location.origin,
  /**
   * 页面前缀路径
   */
  originUrl:process.env.NODE_ENV === 'development' ? '' : window.location.origin+'/前缀',
}

2、axios.js封装

import axios from 'axios'
import config from './config.js'
import store from "./store/index"
import { Message } from 'view-design'

/**
 * 登录页面路径
 */
class HttpRequest {
  constructor(baseUrl = "") {
    this.baseUrl = baseUrl
    this.loginPath = config.mode === "hash" ? config.originUrl + '/#/login' : config.originUrl + '/login'
  }

  getInsideConfig() {
    const configs = {
      baseURL: this.baseUrl,
      timeout: config.timeout,
      headers: {}
    }
    return configs
  }

  goLogin() {
    window.location.href = this.loginPath
  }
  interceptors(instance, url) {
    /**
     * 请求拦截器
     */
    instance.interceptors.request.use((config) => {
      const accessToken = store.state.user.accessToken
      if (accessToken) {
        config.headers.Authorization = accessToken
      } else {
        this.goLogin()
      }
      return config
    }, function (error) {
      return Promise.reject(error)
    })

    /**
     * 响应拦截器
     * 601 token过期, 602 token无效, 651 密钥过期, 653密钥无效
     */
    instance.interceptors.response.use((response) => { 
      let code = response.data.status
      if (code === 200 || (response.config && response.config.responseType === 'blob')) {
        return response.data
      }
      else if (code === 601 || code === 602) {//token失效，重新登录的状态


      }
      else if(code === 651 || code === 653){//651 密钥过期, 653密钥无效,自动登录状态失效
        Message.error({content: response.data.message})
        this.goLogin()
        return Promise.reject(response.data)
      }
      else {
        return Promise.reject(response.data)
      }
    }, function (error) {
      console.log('22', error)
      // 捕获promise错误
      Message.error({content: error.code})
      return Promise.reject(error)
    })
  }

  request=(options)=> {
    const instance = axios.create()
    options = Object.assign(this.getInsideConfig(), options)
    this.interceptors(instance, options.url)
    return instance(options)
  }
}


export default HttpRequest

3.commonHttp.js引用封装后的axios

import HttpRequest from "./axios"
import config from './config.js'
import qs from 'qs'

const http = new HttpRequest( config.baseUrl )

export const $postImg = (url, data) => {
  return http.request({
    method: 'post',
    url,
    data,
    headers: { 'Content-Type': 'multipart/form-data' }
  })
}

export const $get = (url, data, options) => {
  return http.request({
    ...options,
    url:`${url}?${qs.stringify(data)}`,
    method: 'get'
  })
}
export const $get1 = (url, params, options) => {
  return http.request({
    ...options,
    url,
    params,
    method: 'get'
  })
}

export const $post = (url, data, options) => {
  return http.request({
    ...options,
    url,
    data,
    method: 'post',
    headers: { 'Content-Type': 'application/json' }
  })
}

export const $delete = (url, data, options) => {
  return http.request({
    ...options,
    url,
    data,
    method: 'delete',
    headers: { 'Content-Type': 'application/json' }
  })
}
export const $postArr = (url, data, options) => {
  return http.request({
    ...options,
    url,
    data,
    method: 'post',
    transformRequest: [function (data) {
      return JSON.stringify(data)
    }],
    headers: { 'Content-Type': 'application/json' }
  })
}

export const $put = (url, data, options) => {
  return http.request({
    ...options,
    url,
    data,
    method: 'put',
    headers: { 'Content-Type': 'application/json' }
  })
}

export const $formPost = (url, data, options) => {
  return http.request({
    ...options,
    url,
    data:qs.stringify(data),
    method: 'post',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  })
}

export const $httpDelete = (url, data, options)=>{
   return http.request({
    ...options,
      url,
      data,
      method: 'delete'
    })
  }