axios封裝以及API接口管理

在src文件夾下新建api文件夾，並新建index.js用來作爲axios封裝

index.js 代碼如下：

import axios from 'axios'
import config from '../config/server.js'
import qs from 'qs'
import Vue from 'vue'
import { getToken } from '../utils/common'

import { Message } from 'elementUI'

/** **** 創建axios實例 ******/
const service = axios.create({
  baseURL: config.apiPathPrefix, // api 的 base_url
  timeout: 150000 // request timeout
})
Vue.prototype.$http = service
/** **** //取消請求標記 ******/
const CancelToken = axios.CancelToken

/** **** //攔截器 ******/
service.interceptors.request.use(config => {
  const oldHeaders = config.headers || {}
  config.headers = {
    common: {},
    'X-CSRF-TOKEN': getToken(),
    ...oldHeaders
  }
  config.headers.common = {
    'X-Requested-With': 'XMLHttpRequest'
  }

  if (config.method === 'get') {
    config.params = { ...config.params, _t: Date.now() }
  }
  return config
})
service.interceptors.response.use(
  res => {
    if (res.data.type === -2) {
      Message.error({
        showClose: true,
        message: res.data.msg
      })
    }
    return Promise.resolve(res)
  },
  err => {
    const rp = err.response.status
    if (rp === 401 || rp === 403 || rp === 302) {
      skipLogin()
    } else {
      // window.app.feedback();
      Message.error({
        showClose: true,
        message: '服務器內部錯誤'
      })
    }
    return Promise.reject(err)
  }
)
export default {
  source: CancelToken.source(),
  resetSource () {
    this.source = axios.CancelToken.source()
  },
  fetchPost (url, params, isSucMsg, alertTitle, headers) {
    return new Promise((resolve, reject) => {
      service
        .post(`${url}${config.apiPathSuffix}`, params, {
          headers,
          cancelToken: this.source.token
        })
        .then(res => {
          // window.app.feedback(res.data, isSucMsg, alertTitle);
          // console.log('res', res)
          resolve(res.data)
        })
        .catch(err => {
          // window.app.feedback();
          reject(err)
        })
    })
  },
  fetchPostForm (url, params, isSucMsg, alertTitle, headers) {
    return new Promise((resolve, reject) => {
      service
        .post(`${url}${config.apiPathSuffix}`, qs.stringify(params), {
          headers: Object.assign(
            {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            headers
          ),
          cancelToken: this.source.token
        })
        .then(res => {
          // window.app.feedback(res.data, isSucMsg, alertTitle);
          resolve(res.data)
        })
        .catch(err => {
          // window.app.feedback();
          reject(err)
        })
    })
  },
  fetchPostJson (url, params, isSucMsg, alertTitle, headers) {
    return new Promise((resolve, reject) => {
      service
        .post(`${url}${config.apiPathSuffix}`, params, {
          headers: Object.assign(
            {
              'Content-Type': 'application/json;charset=UTF-8'
            },
            headers
          )
        })
        .then(res => {
          // window.app.feedback(res.data, isSucMsg, alertTitle);
          resolve(res.data)
        })
        .catch(err => {
          // window.app.feedback();
          reject(err)
        })
    })
  },
  fetchGet (url, params, isSucMsg, headers) {
    return new Promise((resolve, reject) => {
      service
        .get(`${url}${config.apiPathSuffix}`, {
          params,
          headers
        })
        .then(res => {
          // window.app.feedback(res.data, isSucMsg);
          resolve(res.data)
        })
        .catch(err => {
          // window.app.feedback();
          reject(err)
        })
    })
  },
  fetchGetNoTip (url, params, isSucMsg, headers) {
    return new Promise((resolve, reject) => {
      service
        .get(`${url}${config.apiPathSuffix}`, { params, headers })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          // window.app.feedback();
          reject(err)
        })
    })
  }
}
// 跳至cas登錄
function skipLogin () {
  if (process.env.NODE_ENV !== 'development') {
    window.location.reload()
  }
}

server.js  代碼如下：

// const baseContext = 'ctm01ivtrack-web'
const baseContext = 'ctm01soiportal'
const DEBUG = process.env.NODE_ENV === 'development'
module.exports = {
  baseContext: baseContext,
  apiPathPrefix: `/${baseContext}/`,
  apiPathSuffix: '.do',
  sysPath: DEBUG ? '/' : `/${baseContext}/`,
  isDev: DEBUG,
  // target: 'http://10.192.33.37:17010'
  // target: 'http://10.192.33.25:17010'
  target: 'http://10.192.33.27:3179'
}

common.js  代碼如下：

const getToken = () => {
  let token = ' '
  let metas = document.getElementsByTagName('meta')

  for (let meta of metas) {
    if (meta.getAttribute('name') === '_csrf') {
      token = meta.getAttribute('content')
    }
  }
  return token
}

然後就是接口如何調用的問題了：

在api下新建模塊接口js文件，代碼如下：

import api from './index.js'
// 獲取菜單
function getMenuList (...args) {
  return api.fetchGet('/menu/getMenu', ...args)
}
// 退出
function signOut (...args) {
  return api.fetchGet('/menu/logout', ...args)
}
export default {
  getMenuList,
  signOut
}

最後在vue中引入對應js接口文件調用接口

import api from '@/api/demo'

async getList () {
   let res = await api.getMenuList()
 },