vue中axios的二次封装实例讲解


Posted in Javascript onOctober 14, 2019

我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理

第一步,先在src中的公共文件夹中如utils里新建request.js文件

vue中axios的二次封装实例讲解

import axios from 'axios'
import router from '@/router/routers'
import { Notification, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'
import Config from '@/config'
 
import {baseUrl} from '@/utils/env'
 
// 创建axios实例
const service = axios.create({
 baseURL: baseUrl, // api 的 base_url
 // baseURL: process.env.BASE_API, // api 的 base_url
 timeout: Config.timeout // 请求超时时间
})
 
// request拦截器
service.interceptors.request.use(
 config => {
  if (getToken()) {
   config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  config.headers['Content-Type'] = 'application/json'
  return config
 },
 error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
 }
)
 
// response 拦截器
service.interceptors.response.use(
 response => {
  const code = response.status
  console.log(response)
  if (code < 200 || code > 300) {
   Notification.error({
    title: response.message
   })
   return Promise.reject('error')
  } else {
   return response.data
  }
 },
 error => {
  let code = 0
  try {
   code = error.response.data.status
  } catch (e) {
   if (error.toString().indexOf('Error: timeout') !== -1) {
    Notification.error({
     title: '网络请求超时',
     duration: 2500
    })
    return Promise.reject(error)
   }
   if (error.toString().indexOf('Error: Network Error') !== -1) {
    Notification.error({
     title: '网络请求错误',
     duration: 2500
    })
    return Promise.reject(error)
   }
  }
  if (code === 401) {
   MessageBox.confirm(
    '登录状态已过期,您可以继续留在该页面,或者重新登录',
    '系统提示',
    {
     confirmButtonText: '重新登录',
     cancelButtonText: '取消',
     type: 'warning'
    }
   ).then(() => {
    store.dispatch('LogOut').then(() => {
     location.reload() // 为了重新实例化vue-router对象 避免bug
    })
   })
  } else if (code === 403) {
   router.push({ path: '/401' })
  } else {
   const errorMsg = error.response.data.message
   if (errorMsg !== undefined) {
    Notification.error({
     title: errorMsg,
     duration: 2500
    })
   }
  }
  return Promise.reject(error)
 }
)
export default service

代码解读:

vue中axios的二次封装实例讲解

 vue中axios的二次封装实例讲解

将接口统一放到单独的文件中如我的

vue中axios的二次封装实例讲解

引入request.js

vue中axios的二次封装实例讲解

第三步,

在页面使用

vue中axios的二次封装实例讲解

vue中axios的二次封装实例讲解

好了,这就是axios的二次封装

以上就是关于vue中axios的二次封装的全部知识点内容,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
javascript中length属性的探索
Jul 31 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
js操作iframe父子窗体示例
May 22 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
vue实现折线图 可按时间查询
Aug 21 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 #Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 #Javascript
vue实现百度语音合成的实例讲解
Oct 14 #Javascript
vue中进行微博分享的实例讲解
Oct 14 #Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 #Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 #Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 #Javascript
You might like
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
简单易懂的python环境安装教程
2017/07/13 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
python的pip安装以及使用教程
2018/09/18 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
英国计算机商店:Technextday
2019/12/28 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
业务主管岗位职责范本
2013/12/25 职场文书
网络程序员自荐信
2014/01/25 职场文书
办公室副主任职责范本
2014/03/08 职场文书
买卖协议书范本
2014/04/21 职场文书
质量标语大全
2014/06/12 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
车辆年审委托书范本
2014/09/18 职场文书
2014年创卫工作总结
2014/11/24 职场文书
自我推荐信格式模板
2015/03/24 职场文书
家长会后的感想
2015/08/11 职场文书
在js中修改html body的样式
2021/11/11 Javascript