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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
js异或加解密效果代码
Jun 25 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
requireJS使用指南
Apr 27 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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数据库操作方法(MYSQL版)
2011/06/08 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
记录一次websocket封装的过程
2020/11/23 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
python常见数制转换实例分析
2015/05/09 Python
python实现web方式logview的方法
2015/08/10 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
python如何操作mysql
2020/08/17 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
介绍一下write命令
2012/09/24 面试题
十一酒店活动方案
2014/02/20 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
党员评议自我评价
2015/03/03 职场文书
2015年重阳节主持词
2015/07/04 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python