為了方便使用 axios 將其封裝

httpService.js

import axios from 'axios' // 引入axios
import { Loading , Message } from 'element-ui' // 引入Elemente-ui （根據自己使用的UI框架引入 ）
const BASE_URL = process.env.BASE_API // 獲取全域性設定的請求地址
// 定義get請求 資料處理函式 json物件 轉字串
const formatParams = (data) => {
  let arr = []
  for (let name in data) {
    arr.push(encodeURIComponent(name) 
 
+ '=' + encodeURIComponent(data[name]))
  }
  return arr.join('&')
}
axios.defaults.timeout = 15000 // 設定請求超時時間
/**
 * 請求時攔截
 */
axios.interceptors.request.use(config => {
  // 傳送請求時設定頭部資料
  // if (Vuevm.$store.getters.token) {
  //   config.headers.common['authorization'] =     
  //      Vuevm.$store.getters.token
  
 
// }
  return config
},
error => {
  return Promise.reject(error.response)
})
/**
 * 資料返回攔截
 */
axios.interceptors.response.use(function (response) {
// 獲取服務端返回的頭部資料
// if (response.headers.authorization) {
//   Vuevm.$store.commit('token', response.headers.authorization)
// }
  return response
}, function (error) {
 
  return Promise.reject(error)
})
// 設定請求處理函式 （get，post，put）
export const httpService = (url, params, method, loading=true) => {
    let loadingInstance = null
    console.log(BASE_URL + url)
    if (loading) {
        loadingInstance = Loading.service({
            lock: true,
            text: '載入中',
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
        })
    }
    if (method === 'post') {
    return new Promise((resolve, reject) => {
        axios.post(BASE_URL + url, params).then(data => {
            if (loading) loadingInstance.close()
            resolve(data.data)
        }).catch(error => {
            if (loading) loadingInstance.close()
            Message.error('網路不給力')
            reject(error)
        })
    })
    } else if (method === 'get') {
    return new Promise((resolve, reject) => {
        axios.get(BASE_URL + url + '?' + formatParams(params)).then(data => {
            if (loading) loadingInstance.close()
            resolve(data.data)
        }).catch(error => {
            if (loading) loadingInstance.close()
            Message.error('網路不給力')
            reject(error)
        })
    })
    } else if (method === 'put') {
    return new Promise((resolve, reject) => {
        axios.put(BASE_URL + url + '?' + formatParams(params)).then(data => {
            if (loading) loadingInstance.close()
            resolve(data.data)
        }).catch(error => {
            if (loading) loadingInstance.close()
            Message.error('網路不給力')
            reject(error)
        })
    })
    }
}

建立member.js （定義api模組 方便介面統一管理）

import { httpService } from './httpService' // 引入httpService
/**
 * @name 代理使用者列表
 * @param {*} params
 */
export const agencyList = (params) => {
  return httpService('/web/user/list/agency', params, 'get')
}

頁面使用

import { agencyList } from '@/api/member' // 引入定義的api模組 獲取對應的函式
// 定義請求介面函式 使用async 非同步
async getList () {
      const listData = await agencyList(this.form)
      console.log(listData)
}

MD5 加密

import axios from 'axios'
import Qs from 'qs'
import { appKey , calcuMD5 , decryptBy , encryptBy } from '../config'
window.Vuevm = Vuevm;
const BASE_URL = process.env.BASE_API //域名路徑
const SEEDMD5 = calcuMD5("U2FsdGVkX189N3VRCrUckSMoQM98v8PB") //加密MD5

const formatParams = (data)=>{
    let arr = [];
    for (let name in data) {
        arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]))
    }
    return arr.join("&")
}

axios.defaults.timeout = 15000 //超時時間

export const httpService = (url,params,method,loading=true) => {
    let slol = JSON.stringify(params)
    let data = encryptBy(slol, SEEDMD5)//加密引數
    let t = Date.parse(new Date())//時間戳
    let fString = appKey + "&" + t + "&" + data
    let sign = encryptBy(fString, SEEDMD5)

    let newParams = {
        data,
        appKey,
        t,
        sign,
        token: window.localStorage.token?window.localStorage.token:''
    }
    
    if(method === 'post')
    {
        return new Promise((resolve, reject) => { 
            axios.post(BASE_URL+url, Qs.stringify(newParams),{
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
                }).then(data=>{
　　　　　　　　　　// 獲取到的資料進行解密
                data.data = JSON.parse(decryptBy(data.data,calcuMD5("U2FsdGVkXN32VRRCrUckSMoQM98v8PBHUHA")))
                resolve(data.data)
            }).catch(error=>{
                reject(error)
            })
        })
    }
}

config.js

import CryptoJS from 'crypto-js'
import md5 from 'js-md5'
export const appKey = 'cb6015828a44b5234ce9ed1c3bc7acb0'

export const calcuMD5 = (pwd) => { return md5(pwd) }
export const version = '1.0.1'
export const gaoDerKey = 'fee31a04c1acd1c809cb4b4958673864'
export const wxSecret = '4b200551ebef203582268ed45f149ada'
export const wxAppId = 'wxeacc6d8f0388b30c'

// MD5 加密
export const encryptBy =(plaintText,CRYPTOJSKEY) =>{
    var plaintText = plaintText;
    var options = {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    };
    var key = CryptoJS.enc.Utf8.parse(CRYPTOJSKEY);
    var encryptedData = CryptoJS.DES.encrypt(plaintText, key, options);
    var encryptedBase64Str = encryptedData.toString();
    return encryptedBase64Str;
}
export const decryptBy = (encryptedBase64Str,CRYPTOJSKEY, type) => {
    var encryptedBase64Str = encryptedBase64Str;
    var options = {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    };
    var key = CryptoJS.enc.Utf8.parse(CRYPTOJSKEY);
    // 解密
    var decryptedData = CryptoJS.DES.decrypt(encryptedBase64Str, key, options);
    // 解密後，需要按照Utf8的方式將明文轉位字串
    var decryptedStr = decryptedData.toString(CryptoJS.enc.Utf8);
    return decryptedStr;
}