详解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 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
Javascript 面试题随笔
Mar 31 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
javascript控制台详解
Jun 25 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
PHP 多进程 解决难题
2009/06/22 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
python使用append合并两个数组的方法
2015/04/28 Python
Django内容增加富文本功能的实例
2017/10/17 Python
wxpython实现图书管理系统
2018/03/12 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python3.7.0的安装步骤
2018/08/27 Python
python global关键字的用法详解
2019/09/05 Python
python logging 日志的级别调整方式
2020/02/21 Python
Python字典实现伪切片功能
2020/10/28 Python
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
2014小学植树节活动总结
2014/03/10 职场文书
学生保证书范文
2014/04/28 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
教师年度考核个人总结
2015/02/12 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python