如何用封装自己的Axios

如何封装

首先创建一个http.js的文件

import axios from 'axios'
import store from '@/store'
import { router } from '@/router'
import i18n from '../lang'
import { Message, Loading } from 'element-ui'

// 创建 axios 实例
const service = axios.create({})
// 设置默认
service.defaults.headers = {
  'X-Requested-With': 'XMLHttpRequest'
}
service.defaults.timeout = 10000
// service.defaults.baseURL = process.env.BASE_API

//用来处理刷新token后重新请求的自定义变量
service.defaults.isRetryRequest = false

// loadinginstace 遮罩层控制
let loadingInstance
// pending 存放正在请求的ajax
const pending = {}
const CancelToken = axios.CancelToken

const removePending = (key, isRequest = false) => {
  if (pending[key] && isRequest) {
    pending[key](i18n.t('msg.ajaxRepetitionCancel'))
  }
  delete pending[key]
}

const getRequestIdentify = (config, isReuest = false) => {
  let url = config.url
  if (isReuest) {
    url = config.baseURL + config.url.substring(1, config.url.length)
  }
  return config.method === 'get' ? encodeURIComponent(url + JSON.stringify(config.params)) : encodeURIComponent(config.url + JSON.stringify(config.data))
}

// POST传参序列化(添加请求拦截器)
// 在发送请求之前做某件事
service.interceptors.request.use(config => {
  // 拦截重复请求(即当前正在进行的相同请求)
  let requestData = getRequestIdentify(config, true)
  removePending(requestData, true)
  config.cancelToken = new CancelToken((c) => {
    pending[requestData] = c
  })
  // // 设置以 form 表单的形式提交参数
  // if(config.method  === 'post'){
  //   // JSON 转换为 FormData
  //   const formData = new FormData()
  //   Object.keys(config.data).forEach(key => formData.append(key, config.data[key]))
  //   config.data = formData
  // }
  // 验证添加token
  if (store.getters.token) {
    config.headers.Authorization = 'Bearer ' + store.getters.token
  }
  return config
}, error => {
  alert(i18n.t('msg.ajaxParamsError'), 'fail')
  return Promise.reject(error)
})

// request拦截器，实现loading加载
// service.interceptors.request.use(config => {
//   loadingInstance = Loading.service({})
//   return config
// }, error => {
//   loadingInstance.close()
//   Message({
//     message: error.message,
//     type: 'error',
//     duration: 5 * 1000
//   })
//   return Promise.reject(error)
// })

// // response拦截器，实现loading关闭
// service.interceptors.response.use(data => {
//   loadingInstance.close()
//   return data
// }, error => {
//   Message({
//     message: error.message,
//     type: 'error',
//     duration: 5 * 1000
//   })
//   return Promise.reject(error)
// })

// 响应拦截器即异常处理
service.interceptors.response.use(response => {
  // 把已经完成的请求从 pending 中移除
  let requestData = getRequestIdentify(response.config)
  removePending(requestData)
  return response
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        err.message =  i18n.t('msg.ajax400Msg')
        break;
      case 401:
        err.message = i18n.t('msg.ajax401Msg')
        store.dispatch('DelToken');
        location.reload()
        break;
      case 403:
        err.message = err.response.data.message
        store.dispatch('DelToken');
        location.reload()
        break;
      case 404:
        err.message = i18n.t('msg.ajax404Msg')
        break;
      case 405:
        err.message = i18n.t('msg.ajax405Msg')
        break;
      case 408:
        err.message = i18n.t('msg.ajax408Msg')
        break;
      case 500:
        err.message = i18n.t('msg.ajax500Msg')
        break;
      case 501:
        err.message = i18n.t('msg.ajax501Msg')
        break;
      case 502:
        err.message = i18n.t('msg.ajax502Msg')
        break;
      case 503:
        err.message = i18n.t('msg.ajax503Msg')
        break;
      case 504:
        err.message = i18n.t('msg.ajax504Msg')
        break;
      case 505:
        err.message = i18n.t('msg.ajax505Msg')
        break;
      default:
        err.message = i18n.t('msg.ajaxDefaultMsg') + `${err.response.status}`
    }
  } else {
    if(err.message && err.message !== i18n.t('msg.ajaxRepetitionCancel')){
      err.message = i18n.t('msg.ajaxDefaultMsg2')
    }
  }
  //Message.error({message: err.message})
  return Promise.reject(err)
})

export default service

然后再创建你想要存放接口的文件 如 home.js

//引入
import Axios from '@/utils/http'

// 热点分类信息接口
export function gethotpot (data) {
  return Axios({
    url: '/rsds/gethotpot',
    method: 'post',
    data,
    timeout:20000  //超时时间也可设置
  })
}

// 认证数量接口
export function getsummary (data) {
  return Axios({
    url: '/rsds/getsummary',
    method: 'post',
    data
  })
}

如何在vue文件中使用
import { getsummary, gethotpot } from ‘@/api/home’

然后在methods里调用

get_Summary() {
 getsummary().then(response => {
   console.log(response)
 })
}