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的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
微信小程序实现录音Record功能
May 09 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
重定向实现代码
2006/11/20 Javascript
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python文件比较示例分享
2014/01/10 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
python实现ID3决策树算法
2017/12/20 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
python Scrapy框架原理解析
2021/01/04 Python
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
高三生物教学反思
2014/01/25 职场文书
业务员岗位职责范本
2015/04/03 职场文书
六一儿童节新闻稿
2015/07/17 职场文书