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 相关文章推荐
Javascript 学习笔记 错误处理
Jul 30 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 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注销代码(session注销)
2012/05/31 PHP
php数组去重的函数代码
2013/02/03 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
php无限遍历目录示例
2014/02/21 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
php生成图片缩略图的方法
2015/04/07 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
jQuery创建插件的代码分析
2011/04/14 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
Javascript之String对象详解
2016/06/08 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
JS常见算法详解
2017/02/28 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
Python正则表达式常用函数总结
2017/06/24 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
Python 多进程和数据传递的理解
2017/10/09 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
外企财务年会演讲稿
2014/01/03 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
生日主持词
2014/03/20 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
Nginx配置Https安全认证的实现
2021/05/26 Servers
SQL Server中使用表变量和临时表
2022/05/20 SQL Server