详解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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
Javascript 强制类型转换函数
May 17 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
简单理解vue中Props属性
Oct 27 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 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
在普通HTTP上安全地传输密码
2007/07/21 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
python中关于日期时间处理的问答集锦
2013/03/08 Python
python实现的简单猜数字游戏
2015/04/04 Python
python3序列化与反序列化用法实例
2015/05/26 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
python list转矩阵的实例讲解
2018/08/04 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
Python中断多重循环的思路总结
2019/10/04 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
python实现简单俄罗斯方块
2020/03/13 Python
学生手册评语
2014/05/05 职场文书
求职信怎么写
2014/05/23 职场文书
英文演讲稿开场白
2014/08/25 职场文书
老员工辞职信范文
2015/05/12 职场文书
早会开场白台词大全
2015/06/01 职场文书
辅导员学期工作总结
2015/08/14 职场文书