vue 的 axios 進行封裝

 request.js // 封裝get post 各類請求文件

//第一步

import axios from 'axios'
axios.defaults.baseURL = "/api/"
// http請求攔截器請求頭
axios.interceptors.request.use(config => {
  let token = sessionStorage.getItem('mytoken'); //------
  if (!token) {
    // return config
    token = 'dG9rZW4tMS0w'
  }
  config.headers['Authorization'] = token; //-------
  return config
}, error => {
  return Promise.reject(error)
});
// http響應攔截器響應
axios.interceptors.response.use(res => { // 響應成功關閉loading
  return res.data
}, error => {
  return Promise.reject(error)
})
/**
 *   get方式
 *   url {String} api接口地址
 *   params {Object} 接口參數
 */
function get(url) {
  return function(params) {
    return axios.get(url, { params }).then(res => {
      return res
    })
  }
}
/**
 *   get方式下載二進制流文件
 *   url {String} api接口地址
 *   params {Object} 接口參數
 */
function getDownload(url) {
  return function(params) {
    return axios.get(url,{params:params, responseType: 'arraybuffer'}).then(res => {
      return res
    })
  }
}
/**
 *   post方式
 *   url {String} api接口地址
 *   params {Object} 接口參數
 */
function post(url) {
  return function(params) {
    const formData = new FormData()
    for (let key in params) {
      let val = params[key]
      formData.append(key, val)
    }
    return axios.post(url,params).then(res => {
      return res
    })
  }
}

export { get, post ,getDownload}

//第二步引入上面寫的文件

import {
  get,
  post,
  getDownload
} from '../request'

const getProductYieldReport = post('/xkec/getProductYieldReport')//二期選廠生產產量報表
const expProductYieldReport = getDownload('/xkec/expProductYieldReport') //導出二期選廠生產產量報表
const getProductGroupReport = post('/xkec/getProductGroupReport')//班組報表
const expProductGroupReport = getDownload('/xkec/expProductGroupReport')//導出班組報表
const getAccumulativeTotalReport = post('/xkec/getAccumulativeTotalReport')//累計報表
const expAccumulativeTotalReport = getDownload('/xkec/expAccumulativeTotalReport')//導出累計報表
const alarmScrollList = post('/xkec/alarmScrollList')//報警跑馬燈數據（已廢棄）
const getEquipmentStatus = post('/xkec/getEquipmentStatus') //設備列表
const getEquipmentInfoById = post('/xkec/getEquipmentInfoById')//設備信息
const getArea = post('/xkec/getArea')//獲取區域
const getEquipmentInfoList = post('/xkec/getEquipmentInfoList') //控制圖詳情

export {
  getProductYieldReport,
  expProductYieldReport,
  getProductGroupReport,
  expProductGroupReport,
  getAccumulativeTotalReport,
  expAccumulativeTotalReport,
  alarmScrollList,
  getEquipmentStatus,
  getEquipmentInfoById,
  getArea,
  getEquipmentInfoList
}

//第三步如何使用

import {alarmScrollList,getEquipmentStatus,getArea} from "../../api/modules/api"


methods：{
         _alarmScrollList(){
           let params = {
             tokenId:getUserInfo().token,
             type:1
           }
           alarmScrollList(params).then((res)=>{

           })
         },
}