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 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
jquery键盘事件介绍
Jan 31 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 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 程式大小
2006/12/06 PHP
PHP 命名空间实例说明
2011/01/27 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python实现获取网站PR及百度权重
2015/01/21 Python
Python线程中对join方法的运用的教程
2015/04/09 Python
简单的python后台管理程序
2017/04/13 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
python中线程和进程有何区别
2020/06/17 Python
外贸实习生自荐信范文
2013/11/24 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
总结表彰大会主持词
2014/03/26 职场文书
银行委托书范本
2014/04/04 职场文书
办理房产过户的委托书
2014/09/14 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
导游词之日月潭
2019/11/05 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB