详解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 相关文章推荐
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
vue实现div单选多选功能
Jul 16 Javascript
JS闭包原理及其使用场景解析
Dec 03 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数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
python列表去重的二种方法
2014/02/14 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Python通过文本和图片生成词云图
2020/05/21 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
夜不归宿检讨书
2014/02/25 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
三好学生个人总结
2015/02/15 职场文书
项目战略合作意向书
2015/05/08 职场文书
二审代理词范文
2015/05/25 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
Go web入门Go pongo2模板引擎
2022/05/20 Golang