详解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 相关文章推荐
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
vue实现滑动解锁功能
Mar 03 Vue.js
浅谈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
destoon各类调用汇总
2014/06/20 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
详解Python发送email的三种方式
2018/10/18 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
大学生旷课检讨书
2014/01/22 职场文书
个人租房协议书
2014/04/09 职场文书
财务负责人岗位职责
2015/02/03 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
vue3获取当前路由地址
2022/02/18 Vue.js
Golang bufio详细讲解
2022/04/21 Golang
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技