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 相关文章推荐
extJs 下拉框联动实现代码
Apr 09 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
python 多线程串行和并行的实例
2019/02/22 Python
Django Celery异步任务队列的实现
2019/07/24 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
如何在django中添加日志功能
2020/02/06 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
python实现感知机模型的示例
2020/09/30 Python
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
书法大赛策划方案
2014/06/04 职场文书
升职感谢信
2015/01/22 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
mysql事务隔离级别详情
2021/10/24 MySQL
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL