详解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 相关文章推荐
js操作select控件的几种方法
Jun 02 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
js简单时间比较的方法
Aug 02 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
php实现的xml操作类
2016/01/15 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
利用js对象弹出一个层
2008/03/26 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
Python项目跨域问题解决方案
2020/06/22 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
学校教学工作总结2015
2015/05/19 职场文书
革命电影观后感
2015/06/18 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
导游词之西安骊山
2019/12/03 职场文书
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技