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 作用域使用说明
Aug 13 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
Openlayers实现距离面积测量
Sep 28 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
人族 Terran 基本策略
2020/03/14 星际争霸
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
原生JS轮播图插件
2017/02/09 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
python如何进行矩阵运算
2020/06/05 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
置业顾问岗位职责
2015/02/09 职场文书
论语读书笔记
2015/06/26 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
js前端图片加载异常兜底方案
2022/06/21 Javascript