详解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 相关文章推荐
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
js读取配置文件自写
Feb 11 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
vue动态配置模板 'component is'代码
Jul 04 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
解决GD中文乱码问题
2007/02/14 PHP
php xml文件操作代码(一)
2009/03/20 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Golang与python线程详解及简单实例
2017/04/27 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python解决字符串倒序输出的问题
2018/06/25 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
Python PIL库图片灰化处理
2020/04/07 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
中学生期中自我鉴定
2014/04/20 职场文书
书香校园建设方案
2014/05/02 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
Android 中的类文件和类加载器详情
2022/06/05 Java/Android