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 相关文章推荐
html中table数据排序的js代码
Aug 09 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
js窗口震动小程序分享
Nov 28 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 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 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
prototype 的说明 js类
2006/09/07 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
详解React 元素渲染
2020/07/07 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
Python基于有道实现英汉字典功能
2015/07/25 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python中for in的用法详解
2020/04/17 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
师范生自荐信
2013/10/27 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
国企干部对照检查材料
2014/08/22 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
个人查摆剖析材料
2014/10/16 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
领导新年致辞2016
2015/07/29 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
Python实现抖音热搜定时爬取功能
2022/03/16 Python
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫