版本② vue請求接口封裝

封裝axios

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken, removeToken } from '@/utils/auth'

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

// request攔截器
service.interceptors.request.use(config => {
  // Do something before request is sent
  if (store.getters.token) {
    config.headers['X-Token'] = getToken()
  }
  return config
}, error => {
  // Do something with request error
  Promise.reject(error)
})

// respone攔截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if(res.code && res.code !== 0) {
      var msg = res.msg || res.data
      if(res.code === 100002) {
        removeToken()
        Message({
          message: '登錄超時，請重新登錄',
          type: 'error',
          duration: 3 * 1000
        })
        sessionStorage.clear()
        router.replace({
          path: '/login?redirect=/welcome'
        })
        return Promise.reject(res)
      } else {
        Message({
          message: msg || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(new Error(res.msg || 'Error'))
      }
    } else {
      return res
    }
  },

  error => {
    const msg = error.response.data.msg
    const statusCode = error.response.status
    const code = error.response.data.code
    if(code && code === 100002 || statusCode && statusCode === 401) {
      removeToken()
      Message({
        message: '登錄超時，請重新登錄',
        type: 'error',
        duration: 3 * 1000
      })
      sessionStorage.clear()
      router.replace({
        path: '/login?redirect=/welcome'
      })
      return Promise.reject(error)
    } else {
      Message({
        message: msg || error.toString(),
        type: 'error',
        duration: 5 * 1000
      })
    }
    return Promise.reject(error)
  }

export default service

api定義

import request from '@/utils/request'

export function getTreeData() {
  return request({
      url: `/api/resource/getTreeData`,
      method: 'GET'
  })
}

使用

import { getTreeData } from '@/api/resource'

async getTreeData() {
  this.treeLoading = true
  let res = await getTreeData()
  this.treeLoading = false
  if(res && res.code == 0) {
    this.resourceTreeData = res.data
  } else {
    this.$message.error('請求出現錯誤，請稍后重試');
  }
},