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


Posted in Javascript onApril 01, 2019

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

api.js

封装前端api接口,接受前端页面发来的请求,封装后可根据函数名判断类型和url给axios文件,方便维护和开发。

import http from '../http/http.js'
export default {
 login(data, token){
  return http.post("/login",data, token)
 },
 getUserInfo(data, token){
  return http.get("/getUserInfo",data, token)
 }
}

在main.js中引用后就可以全局调用了

前端中用this.$api.urlName()的格式发送请求,也可以不经过api直接用this. $http,但是每次都要写url,当接口多的时候比较麻烦。所以推荐用api封装好。

import api from './api/api.js'
import http from './http/http.js'
//定义全局变量
Vue.prototype.$api = api

Vue.prototype.$http = http

前端中使用:

由于axios返回的是promise对象,所以要用 .then的形式接收后端发回来的response,然后做出相应的反馈。

//直接用this.$api调用api中接口,如果不封装api接口可以用this.$http
 this.$api.login(data, token).then((res) => {
	console.log(res)
 }).catch((err) => {
 	console.log(res)
 })

以上所述是小编给大家介绍的Vue前端对axios的封装和使用详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
javascript求日期差的方法
Mar 02 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
js实现无缝轮播图
Mar 09 Javascript
浅谈js闭包理解
Apr 01 #Javascript
详解Vue之父子组件传值
Apr 01 #Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 #Javascript
JS中的防抖与节流及作用详解
Apr 01 #Javascript
微信小程序 slot踩坑的解决
Apr 01 #Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 #Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 #Javascript
You might like
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
基于php判断客户端类型
2016/10/14 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
layui分页效果实现代码
2017/05/19 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python抓取网页中的图片示例
2014/02/28 Python
在Python下尝试多线程编程
2015/04/28 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python的concat等多种用法详解
2018/11/28 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
幼儿教师思想汇报
2014/01/10 职场文书
运动会入场解说词300字
2014/01/25 职场文书
环保志愿者活动方案
2014/08/14 职场文书
五心教育心得体会
2014/09/04 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
初二物理教学反思
2016/02/19 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python
Linux安装apache服务器的配置过程
2021/11/27 Servers
mysql如何查询连续记录
2022/05/11 MySQL