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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
Vue源码解析之数组变异的实现
Dec 04 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
微信小程序使用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
帝国cms常用标签汇总
2015/07/06 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
详细分析vue响应式原理
2020/06/22 Javascript
Python只用40行代码编写的计算器实例
2017/05/10 Python
Python探索之SocketServer详解
2017/10/28 Python
Django model序列化为json的方法示例
2018/10/16 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
行政办公员自我评价分享
2013/12/14 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书