Vue2.0+3.0x 对axios封装

对 axios 封装 vue2.0 and 3.0x

// 请求地址 https://api.it120.cc
// 引入axios模块
import axios from 'axios'
// 引入 Vue
import Vue from 'vue' // vue2.0
import { createApp } from 'vue' // vue3.0
import store from '../store' //vuex

/*
*引入loading组件方法 vue2.0
*/
import $loading from '@/components'
Vue.use($loading)

/*
*引入loading组件方法 vue3.0
*/
// import $loading from '@/components'
// var load = createApp().use($loading);

// axios 创建一个请求方法 请求头
const http = axios.create({
  // 设置请求头 公共地址
  baseURL: 'https://api.it120.cc',
  timeout: 5000 // 设置请求超时的时间
})

//请求拦截
// interceptors 请求拦截器 request 请求
http.interceptors.request.use(confirm => {
  // 请求成功
  if (store.state.userInfo.token) {
    confirm.headers.token = store.state.userInfo.token
  }
  // console.log(confirm.headers.token)
  // 使用 $loading 请求的时候调用 让 loading 显示 ------
  Vue.$loading.show('加载中···') // vue2.0
  // load.config.globalProperties.$loading.show('你是个麻瓜') //3.0
  return confirm
}, err => {
  // 请求失败
  Promise.reject(err)
})
// 响应拦截
// res 后台返回的数据
http.interceptors.response.use(res => {
  switch (res.data.code) {
    case 404:
      console.log('请求资源照不到！')
      break;
    case 500:
      console.log('服务器错误！')
      break;
  }
  // 请求结束 调用loading 让他隐藏
  Vue.$loading.hide() //vue2
  // $loading.config.globalProperties.$loading.hide() // vue3
  return res.data
}, err => {
  // $loading.config.globalProperties.$loading.hide() // vue3
  Promise.reject(err)
})
export default http