Axios 是一個基于 promise 的 HTTP 庫。將axios封裝好后能更高效的開發并且方便維護，而且在以后的項目中也能直接套用，所以封裝好是必要的。在參考了很多方法后，我拼湊出了一套我認為很實用的方法。

首先是http目錄下的兩個文件

helper.js

這個是功能性文件包括拼接url、過濾參數等,把方法集合到一個文件方便維護和修改。
讀一遍知道他有什么功能就行了

const helper = { // 根據name獲取地址欄的參數值 getQueryString (name) {  let reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`)  let hash = window.location.hash  let search = hash.split('?')  let r = search[1] && search[1].match(reg)  if (r != null) return r[2]; return '' }, // 拼接參數至url queryString (url, query) {  let str = []  for (let key in query) {   str.push(key + '=' + query[key])  }  let paramStr = str.join('&')  return paramStr ? `${url}?${paramStr}` : url }, // 自定義判斷元素類型JS toType(obj) {	 return ({}).toString.call(obj).match(//s([a-zA-Z]+)/)[1].toLowerCase()	},// 參數過濾函數 filterNull(o) {	 for (var key in o) {	  if (o[key] === null) {	   delete o[key]	  }	  if (toType(o[key]) === 'string') {	   o[key] = o[key].trim()	  } else if (toType(o[key]) === 'object') {	   o[key] = filterNull(o[key])	  } else if (toType(o[key]) === 'array') {	   o[key] = filterNull(o[key])	  } else if (toType(o[key]) === 'number') {	   o[key] = filterNull(o[key])	  }	 }	 return o	}}export default helper

http.js

接收請求，暴露接口，包含參數params、發往后端的url和token（如果不用JWT的同學可以省略參數token），處理后發往后端

import axios from 'axios'let qs = require('querystring')import helper from './helper'//console.log( process.env.NODE_ENV)//判斷環境提供baseURL，注意要與后臺地址一致let root = process.env.NODE_ENV === 'development' // 開發環境api接口 ? `http://localhost:3001/api` // 生產環境api接口 : `http://127.0.0.1:3001/api`;// 引用axios，設置頭文件axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';function apiAxios(method, url, params, token) { if (params) {  params = helper.filterNull(params) } return axios({  method: method,  //拼接參數  url: method === 'GET'|| method === 'DELETE' ? helper.queryString(url,params) : url,  data: method === 'POST' || method === 'PUT' ? qs.stringify(params) : null,  baseURL: root,  timeout: 10000,  headers: { Authorization: `Bearer ${token}` },	//jwt  withCredentials: false })}// 返回在vue模板中的調用接口export default { get: function (url, params, token) {  return apiAxios('GET', url, params, token) }, post: function (url, params, token) {  return apiAxios('POST', url, params, token) }, put: function (url, params, token) {  return apiAxios('PUT', url, params, token) }, delete: function (url, params, token) {  return apiAxios('DELETE', url, params, token) },}