前言

在vue项目中，引入axios的http库，进行二次封装，本文结合自己参与过的项目记录一下二次封装的代码。

Axios二次封装

import axios from 'axios' // 安装axios后引入
let url = "xxx" // 请求的服务器url

//创建axios实例
const service = axios.create({
  baseURL: url, // 主路径
  withCredentials: true, // 允许跨域携带cookie
  timeout: 5000 // 时延
})

// 设置 post、put 默认 Content-Type
service.defaults.headers.post['Content-Type'] = 'application/json'
service.defaults.headers.put['Content-Type'] = 'application/json'

// request拦截
service.interceptors.request.use(config => {
  config.headers['X-Token'] = getToken('xxx') 
  // getToken函数不赘述，用于获取token
  return config
},
error => {
  console.log(error) // 打印错误
  return Promise.reject(error)
})

// reponse 拦截
service.interceptors.response.use(response => {
  const res = response.data
  if (res.code !== 200) {
    Toast.fail(res.detail || res.msg)
    // 50008:非法令牌;50012:其他客户登录;50014:令牌过期;
    if (res.code === 5008 || res.code === 50012 || res.code === 50014) {
      Toast.fail('您已登出，请重新登录')
      // todo
    }
    return Promise.reject(response)
  } else {
    if (response.detail) {
      // todo
    }
    return res
  }
},
(error) => {
  return Promise.reject(error)
})

export default service