源码目录

在src目录下建立一个request文件夹。里面建立两个文件:

http.js
api.js

源码内容

http.js

import axios from ‘axios’ // 引入axios
import store from ‘…/store/index’ // 引入Vuex
import router from ‘…/router’ // 引入vue-router
import { Message } from ‘element-ui’ //局部引入UI框架组件
// 环境的切换
if (process.env.NODE_ENV === ‘development’) {
axios.defaults.baseURL = ‘https://xxx/’ // 开发环境
} else if (process.env.NODE_ENV === ‘debug’) {
axios.defaults.baseURL = ‘’ // 调试环境
} else if (process.env.NODE_ENV === ‘production’) {
axios.defaults.baseURL = ‘https://xxx/’ // 生产环境
}
axios.defaults.timeout = 10000;
// 请求拦截器
axios.interceptors.request.use(
config => {
if (localStorage.getItem(‘Authorization’)) {
config.headers.Authorization = Bearer + " " + localStorage.getItem(‘Authorization’); //查看是否存在token
return config;
} else if (config.isUpload) {
config.headers = { ‘Content-Type’: ‘multipart/form-data’} // 根据参数是否启用form-data方式
return config;
} else {
config.headers = { ‘Content-Type’: ‘application/json’ }
return config;
}
},
error => {
return Promise.error(error)
})

// 响应拦截器
axios.interceptors.response.use(
// 服务码是200的情况
response => {
if (response.status === 200) {
switch (response.data.code) {
// 未登录
case 3:
Message({
message: ‘未登录’,
type: ‘error’,
offset:380,
duration:1000
});
// 清除登录状态,返回首页
localStorage.removeItem(‘Authorization’)
localStorage.removeItem(‘info’)
store.commit(“changeNull”)
if (router.app._route.name != ‘home’) {
setTimeout(() => {
router.push({
path: ‘/’,
})
}, 1000)
}
break;
// 课程已添加
case 100:
Message({
message: ‘课程已添加’,
type: ‘error’,
offset:380,
duration:1000
});
break;
// token过期
case 5:
Message({
message: ‘登录过期,请重新登录’,
type: ‘error’,
offset:380,
duration:1000
});

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119116763

Vue回炉重造之三次封装axios的更多相关文章

  1. Vue回炉重造之封装一个实用的人脸识别组件

    前言 人脸识别技术现在越来越火,那么我们今天教大家实现一个人脸识别组件. 资源 element UI Vue.js tracking-min.js face-min.js 源码 由于我们的电脑有的有摄 ...

  2. Vue回炉重造之封装防刷新考试倒计时组件

    <!-- 考试倒计时组件 --> <template> <div class="time"> <p>00:{{timerCount2 ...

  3. Vue回炉重造之图片加载性能优化

    前言 图片加载优化对于一个网站性能好坏起着至关重要的作用.所以我们使用Vue来操作一波.备注 以下的优化一.优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的 ...

  4. Vue回炉重造之如何使用props、emit实现自定义双向绑定

    下面我将使用Vue自带的属性实现简单的双向绑定. 下面的例子就是利用了父组件传给子组件(在子组件定义props属性,在父组件的子组件上绑定属性),子组件传给父组件(在子组件使用$emit()属性定义一 ...

  5. Vue回炉重造之router路由(更新中)

    安装vue-router npm i vue-router -S 配置1.创建文件夹与文件 创建一个router文件夹,在文件夹中创建两个文件,分别是router.js和routes.js文件.2.编 ...

  6. Vue回炉重造之搭建考试答卷系统

    本篇章主要讲述系统搭建逻辑,有疑问的可以加微信联系我.考试系统 资源 Vue.js Element UI 第三方数据接口 业务 答题过程中,防止用户中途退出或者其他不可抗力因素阻碍答题,在每次选择都要 ...

  7. Asp.Net SignalR 使用记录 技术回炉重造-总纲 动态类型dynamic转换为特定类型T的方案 通过对象方法获取委托_C#反射获取委托_ .net core入门-跨域访问配置

    Asp.Net SignalR 使用记录   工作上遇到一个推送消息的功能的实现.本着面向百度编程的思想.网上百度了一大堆.主要的实现方式是原生的WebSocket,和SignalR,再次写一个关于A ...

  8. 《回炉重造 Java 基础》——集合(容器)

    整体框架 绿色代表接口/抽象类:蓝色代表类. 主要由两大接口组成,一个是「Collection」接口,另一个是「Map」接口. 前言 以前刚开始学习「集合」的时候,由于没有好好预习,也没有学好基础知识 ...

  9. 回炉重造之重读Windows核心编程-006-线程

    线程也是有两部分组成的: 线程的内核对象,操作系统用来管理线程和统计线程信息的地方. 线程堆栈,用于维护现场在执行代码的时候用到的所有函数参数和局部变量. 进程是线程的容器,如果进程中有一个以上的线程 ...

随机推荐

  1. Python学习进度汇报

    学习进度还是比较慢的,上周五(18号晚上安装了Pycharm)就开始学,五天只到这个位置,当前一直是2倍速看黑马的Python视频,外加查看菜鸟的文档,需要加快一些进度了,后续还有后续的目标要实现,争 ...

  2. 将border 边框换成图片 border-image

    <template>   <div class="heart"></div> </template> <script> ...

  3. 约定编程与Sping AOP

    一.约定编程 Spring AOP是一种约定流程的编程,咱们可以先通过动态代理模式的实现来理解Spring AOP的概念. 代理的逻辑很简单,例如,当你需要采访一名儿童时,首先需要经过他父母的同意,在 ...

  4. Apache Doris Oracle ODBC外表使用指南

    1.软件环境 操作系统:ubuntu 18.04 Apache Doris :0.15 Postgresql数据库:oracle 19c UnixODBC:2.3.4 Oracle ODBC :ins ...

  5. 3.2 常用Linux命令

    1.ifconfig命令 ifconfig命令用于获取网卡配置与网络状态等信息,英文全称为"interface config",语法格式为"ifconfig [参数] [ ...

  6. 《图解UE4渲染体系》Part 0 引擎基础

    在介绍UE4渲染体系前,我们有必要来先看一下UE4是用什么样的方式来构建游戏场景数据的. 1 Object 在UE4中当我们说Object,通常是指代引擎代码中的UObject类,它是引擎里管理绝大部 ...

  7. .Net Core 操作 MongoDB 常见问题及解决方案

    System.FormatException:"Element '_id' does not match any field or property of class XXXX." ...

  8. 定位、z-index、JavaScript变量和数据类型

    溢出属性 # 文本内容超出了标签的最大范围 overflow: hidden; 直接隐藏文本内容 overflow: auto\scroll; 提供滚动条查看 # 溢出实战案例 div { overf ...

  9. 大陆出境海缆TPE APCN NCP APG简介

    目前我国的登陆站主要设立在三个城市 山东 山东青岛登陆站(隶属中国联通) EAC-C2C TPE(美国方向) 上海 上海崇明登陆站(隶属中国电信) APCN2(亚太) NCP(长线--美国,新建,亚太 ...

  10. 345. Reverse Vowels of a String - LeetCode

    Question 345. Reverse Vowels of a String Solution 思路:交换元音,第一次遍历,先把出现元音的索引位置记录下来,第二遍遍历元音的索引并替换. Java实 ...