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 相关文章推荐
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
vue观察模式浅析
Sep 25 Javascript
详解JSON.parse和JSON.stringify用法
Feb 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
php 购物车实例(申精)
2009/05/11 PHP
一个PHP的String类代码
2010/04/20 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
javascript 运算数的求值顺序
2011/08/23 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
Django返回json数据用法示例
2016/09/18 Python
Python 调用Java实例详解
2017/06/02 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
Python FFT合成波形的实例
2019/12/04 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
实习评语大全
2014/04/26 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
学生检讨书怎么写
2015/05/07 职场文书