tnbapp/src/api/index.js

import axios from 'axios'
import store from '@/store'
import router from '@/router'
import Vue from 'vue'

const $axios = axios.create({
  // 5 分钟超时
  timeout: 300000,
  // 域名
  baseURL: process.env.VUE_APP_BASE_API,
  headers: {
    'Content-Type': 'application/json; charset=UTF-8'
  }
})
Vue.prototype.$http = axios // 并发请求
// 在全局请求和响应拦截器中添加请求状态
const loading = null
$axios.defaults.withCredentials = true

// 请求拦截器
$axios.interceptors.request.use(
  config => {
    const token = store.getters.token
    if (token) {
      // 在请求的 Authorization 首部添加 token
      config.headers.Authorization = 'Bearer ' + token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
$axios.interceptors.response.use(
  response => {
    if (loading) {
      loading.close()
    }
    const code = response.status
    if ((code >= 200 && code < 300) || code === 304) {
      return Promise.resolve(response.data)
    } else {
      return Promise.reject(response)
    }
  },
  error => {
    if (loading) {
      loading.close()
    }
    if (error.response) {
      const statusCode = error.response.status
      switch (statusCode) {
        case 401:
          // 清除用户信息和 token 并跳转到登录页面
          store.dispatch('user/resetToken').then(() => {
            router.push('/login')
          }).catch(() => {
          })

          // store.commit('setUserInfo', null)
          // commit('RESET_STATE')
          /* store.user.userInfo = null
          store.user.token = null
          console.log(store.user)*/
          break
        case 404:
          console.error('网络请求不存在')
          break
        default:
          console.error(error.response)
      }
      return error.response
    } else {
      // 请求超时或者网络有问题
      if (error.message.includes('timeout')) {
        console.error('请求超时！请检查网络是否正常')
      } else {
        console.error(error.message)
        console.error('请求失败，请检查服务器是否已启动')
      }
    }
    return Promise.reject(error)
  }
)

// HTTP 请求
export default {
  get(url, params) {
    return $axios({
      method: 'get',
      url,
      params
    })
  },
  post(url, data) {
    return $axios({
      method: 'post',
      url,
      data: JSON.stringify(data)
    })
  },
  put(url, data) {
    return $axios({
      method: 'put',
      url,
      data: JSON.stringify(data)
    })
  },
  delete(url, data) {
    return $axios({
      method: 'delete',
      url,
      data: JSON.stringify(data)
    })
  }
}