详解vue axios二次封装


Posted in Javascript onJuly 22, 2018

这段时间告诉项目需要,用到了vue。

刚开始搭框架的时候用的是vue-resource后面看到官方推荐axios就换过来了 顺便封装了一下

定义公共参数与引入组件:

import axios from 'axios'
import qs from 'qs'
 
axios.interceptors.request.use(config => {
  //显示loading
 return config
}, error => {
 return Promise.reject(error)
})
 
 
axios.interceptors.response.use(response => {
 return response
}, error => {
 return Promise.resolve(error.response)
})
 
function errorState(response) {
  //隐藏loading
 console.log(response)
 // 如果http状态码正常,则直接返回数据
 if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
  return response
   // 如果不需要除了data之外的数据,可以直接 return response.data
 }else{
  Vue.prototype.$msg.alert.show({
      title: '提示',
      content: '网络异常'
  })
 }
 
}
 
function successState(res) {
  //隐藏loading
 //统一判断后端返回的错误码
 if(res.data.errCode == '000002'){
    Vue.prototype.$msg.alert.show({
      title: '提示',
      content: res.data.errDesc||'网络异常',
      onShow () {
      },
      onHide () {
       console.log('确定')
      }
    })
 }else if(res.data.errCode != '000002'&&res.data.errCode != '000000') {
   Vue.prototype.$msg.alert.show({
      title: '提示',
      content: res.data.errDesc||'网络异常',
      onShow () {
 
      },
      onHide () {
       console.log('确定')
      }
    })
 }
}
const httpServer = (opts, data) => {
 
  let Public = { //公共参数
   'srAppid': ""
  }
 
  let httpDefaultOpts = { //http默认配置
     method:opts.method,
     baseURL,
     url: opts.url,
     timeout: 10000,
     params:Object.assign(Public, data),
     data:qs.stringify(Object.assign(Public, data)),
     headers: opts.method=='get'?{
      'X-Requested-With': 'XMLHttpRequest',
      "Accept": "application/json",
      "Content-Type": "application/json; charset=UTF-8"
     }:{
      'X-Requested-With': 'XMLHttpRequest',
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
     }
  }
 
  if(opts.method=='get'){
   delete httpDefaultOpts.data
  }else{
   delete httpDefaultOpts.params
  }
  
  let promise = new Promise(function(resolve, reject) {
   axios(httpDefaultOpts).then(
    (res) => {
     successState(res)
     resolve(res)
    }
   ).catch(
    (response) => {
     errorState(response)
     reject(response)
    }
   )
 
  })
 return promise
}
 
export default httpServer

封装理由:

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 相关文章推荐
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 #Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 #Javascript
5分钟学会Vue动画效果(小结)
Jul 21 #Javascript
详解从Vue-router到html5的pushState
Jul 21 #Javascript
JS实现面向对象继承的5种方式分析
Jul 21 #Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 #Javascript
vue项目中添加单元测试的方法
Jul 21 #Javascript
You might like
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
深入了解Python数据类型之列表
2016/06/24 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
在Python中增加和插入元素的示例
2018/11/01 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
大学学习个人的自我评价
2014/02/18 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python