vue+axios 請求封裝

import axios from 'axios'
import router from '../router/index'
import { Message } from 'element-ui'
import {
  showFullScreenLoading,
  tryHideFullScreenLoading
} from '@/utils/loading'
import { getToken, getUser } from '@/utils/auth'
import QS from 'qs' // 引入qs模塊，用來序列化post類型的數據，後面會提到

// 創建axios實例
const service = axios.create({
  baseURL: process.env.BASE_URL, // api的base_url
  timeout: 5000 // 請求超時時間
})

// request攔截器
service.interceptors.request.use(
  config => {
    config.headers = {
      UserId: getUser(),
      Authorization: getToken()
    }
    showFullScreenLoading()
    return config
  },
  error => {
    Promise.reject(error)
  }
)

// respone攔截器
service.interceptors.response.use(
  response => {
    //當返回信息爲未登錄或者登錄失效的時候重定向爲登錄頁面
    tryHideFullScreenLoading()
    return response
  },
  error => {
    tryHideFullScreenLoading()
    //當返回信息爲未登錄或者登錄失效的時候重定向爲登錄頁面
    if (error.response.status == '401') {
      router.push({
        path: '/login',
        query: { redirect: router.currentRoute.fullPath } //從哪個頁面跳轉
      })
    }
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

/**
 * get方法，對應get請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的參數]
 */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    service
      .get(url, {
        params: params
      })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
/**
 * post方法，對應post請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的參數]
 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    service
      .post(url, params)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}