二次封装axios

一，建文件夹和文件

二，安装axios

npm install axios --save

三，axios.js

import axios from 'axios'
import {
  throwErr
} from '../utils/throwErr.js' //utils 捕捉服务端http状态码的方法
import {
  othercode
} from '../utils/othercode.js' //utils 捕捉服务端httpcode码的方法
// import {
//   Message
// } from 'element-ui' //element Toast的提示


//过滤请求
axios.interceptors.request.use(config => {
  config.ContentType = 'application/json;charset=UTF-8'
  if (localStorage.token) {
    config.headers.Authorization = localStorage.token
    config.headers.lastAdc = localStorage.lastAdc
    config.headers.lastMt = localStorage.lastMt
  }
  return config
}, error => {
  return Promise.reject(error)
})
// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    othercode(response.data.code)
    return response.data;
  },
  error => {
    if (error && error.response) {
      let res = {}
      res.code = error.response.status
      res.msg = throwErr(error.response.status, error.response) //throwErr 捕捉服务端的http状态码 定义在utils工具类的方法
      return Promise.reject(res)
    }
    return Promise.reject(error)
  }
)
export default function request(method, url, data) { //暴露 request 给我们好API 管理
  method = method.toLocaleLowerCase() //封装RESTful API的各种请求方式 以 post get delete为例
  if (method === 'post') {
    return axios.post(url, data) //axios的post 默认转化为json格式
  } else if (method === 'get') {
    return axios.get(url, {
      params: data
    })
  } else if (method === 'delete') {
    return axios.delete(url, {
      params: data
    })
  }
}

四，throwErr和othercode

export const throwErr = (code, response) => {
  let message = '请求错误'
  switch (code) {
    case 400:
      message = '请求错误'
      break
    case 401:
      message = '未授权，请登录'
      break
    case 403:
      message = '拒绝访问'
      break
    case 404:
      message = `请求地址出错: ${response.config.url}`
      break
    case 408:
      message = '请求超时'
      break
    case 500:
      message = '服务器内部错误'
      break
    case 501:
      message = '服务未实现'
      break
    case 502:
      message = '网关错误'
      break
    case 503:
      message = '服务不可用'
      break
    case 504:
      message = '网关超时'
      break
    case 505:
      message = 'HTTP版本不受支持'
      break
    default:
  }
  return message
}

import router from '@/router'
export const othercode = (code) => {
  var storage = window.localStorage;
  switch (code) {
    case 300:
      localStorage.removeItem('token');
      router.replace({
        path: '/'
      })
      break
    case 404:
      router.replace({
        path: '/404'
      })
      break
    case 502:
      router.replace({
        path: '/502'
      })
      break
    case 262:
      router.replace({
        path: '/Noauthority'
      })
      storage.clear();
      break
    case 268:
      router.replace({
        path: '/'
      })
      storage.clear();
      break
    case '-204':
      router.go(-1)
      break
    default:
  }
}

五，接口API管理
单模块

import httpServer from './axios';
const loginHttp = {
  // 版权信息
  geticp: function (data) {
    return httpServer('get', '/api/common/icp', data)
  },
  achievementsWages: function (data) {
    return httpServer('get', 'api/home/achievementsWages', data)
  },
}
export default loginHttp;

整合api文件（api.js）

/** 
 * api接口的统一出口
 */
// 登录模块接口
import login from './login';
// 其他模块的接口……

// 导出接口
export default {
  login,
  // ……
}

main.js导出

import api from './request/api' // 导入api接口
Vue.prototype.$api = api; // 将api挂载到vue的原型上

六，写代理

 proxyTable: {
      '/api/**': {
        target: '', //==>你的目标域名和端口
        changeOrigin: true,
        pathRewrite: {
          '^/': '/'
        }
      },
    },

七，页面中使用

    async geticp() {
      try {
        let res = await this.$api.login.geticp({ id: 9287 });
        if (res.code == 1) {
          var icp = res.data;
          console.log(icp);
        } else {
          // this.$message.error(res.msg);
        }
      } catch (err) {
        console.log(err);
      }
    },

mounted() {
    this.geticp();
  },