vue axios 二次封装的示例代码


Posted in Javascript onDecember 08, 2017

这段时间告诉项目需要,用到了vue。

刚开始搭框架的时候用的是vue-resource后面看到官方推荐axios就换过来了 顺便封装了一下

//引入axios
import axios from 'axios'

let cancel ,promiseArr = {}
const CancelToken = axios.CancelToken;
//请求拦截器
axios.interceptors.request.use(config => {
 //发起请求时,取消掉当前正在进行的相同请求
 if (promiseArr[config.url]) {
  promiseArr[config.url]('操作取消')
  promiseArr[config.url] = cancel
 } else {
  promiseArr[config.url] = cancel
 }
  return config
}, error => {
 return Promise.reject(error)
})

//响应拦截器
axios.interceptors.response.use(response => {
 return response
}, error => {
 return Promise.resolve(error.response)
})

axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

export default {
 //get请求
 get (url,param) {
  return new Promise((resolve,reject) => {
  axios({
   method: 'get',
   url,
   params: param,
   cancelToken: new CancelToken(c => {
   cancel = c
   })
  }).then(res => {
   resolve(res)
  })
  })
 },
 //post请求
 post (url,param) {
  return new Promise((resolve,reject) => {
  axios({
   method: 'post',
   url,
   data: param,
   cancelToken: new CancelToken(c => {
   cancel = c
   })
  }).then(res => {
   resolve(res)
  })
  })
  }
 }

说明

1、为防止发起请求时,当前正在进行的相同请求,在请求拦截器中加入了hash判断,将相同请求url拦截

2、将axios中get,post公共配置抽离出来

axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

3、get,post请求的封装 可能你会问,这里的axios返回的就是promise对象,为什么还要再次对get,post封装一次promise.因为我这边的话,在开发中使用async await会出现数据请求失败的情况,报的错就是返回的不是promise对象。(ps:可async await返回的就是promise呀,这个问题后续再搞一下)就直接return了一个promise对象,以避免上面的错误。下面是请求接口的一个例子

import req from '../api/requestType'
/**
 * 拼团详情
 */
export const groupDetail = param => {
 return req.get('/RestHome/GroupDetail',param)
}

下面是数据的获取

async getData() {
 const params = {
  TopCataID: 0,
  pageNumber: this.pageNumber,
  pageSize: this.pageSize
 }
 const res = await groupList(params)
},

到这里我们就简单的封装了一下适合自己项目的axios

封装理由:

1、可以和后端商量好错误码在这统一提示统一处理,省去不必要的麻烦

2、如果做接口全报文加解密都可以在此处理

接口统一归类: 

const serviceModule = { 
 getLocation: { 
 url: ' service/location/transfor', 
 method: 'get' 
 } 
} 
const ApiSetting = {...serviceModule } 
 
export default ApiSetting

归类好处:

1、后期接口升级或者接口名更改便于维护

http调用:

<script> 
import http from "../../lib/http.js"; 
import ApiSetting from "../../lib/ApiSetting.js"; 
export default { 
 created: function() { 
 http(ApiSetting.getLocation,{"srChannel": "h5",}) 
 .then((res)=>{ 
  console.log(res) 
 },(error)=>{ 
  console.log(error)  
 }) 
 }, 
 methods: { 
 
 } 
} 
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
走出JavaScript初学困境—js初学
Dec 29 Javascript
jquery 滚动条事件简单实例
Jul 12 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
javascript实现拼图游戏
Jan 29 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 #Javascript
js断点调试心得分享(必看篇)
Dec 08 #Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 #Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 #Javascript
微信小程序实现下载进度条的方法
Dec 08 #Javascript
js断点调试经验分享
Dec 08 #Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 #Javascript
You might like
php遍历数组的方法分享
2012/03/22 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
IE中createElement需要注意的一个问题
2010/07/13 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
在Python中使用HTML模版的教程
2015/04/29 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
python如何查看系统网络流量的信息
2016/09/12 Python
windows下python和pip安装教程
2018/05/25 Python
详解Python中的正则表达式
2018/07/08 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
python 调整图片亮度的示例
2020/12/03 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
优秀辅导员事迹材料
2014/02/16 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
宣传口号大全
2014/06/16 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
5.12护士节活动总结
2015/02/10 职场文书
法人身份证明书
2015/06/18 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书