详解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 HashTable
Jan 22 Javascript
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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里的JS打印函数
2006/10/09 PHP
JS实现php的伪分页
2008/05/25 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
广告显示判断
2006/08/31 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
Python中os.path用法分析
2015/01/15 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
python仿抖音表白神器
2019/04/08 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
详解python的super()的作用和原理
2020/10/29 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
国际贸易毕业生求职信范文
2014/02/21 职场文书
结婚周年感言
2014/02/24 职场文书
法制宣传口号
2014/06/16 职场文书
李白故里导游词
2015/02/12 职场文书
防溺水主题班会教案
2015/08/12 职场文书
高中化学教学反思
2016/02/22 职场文书