详解Vue前端对axios的封装和使用

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) },}