import axios from 'axios'
import { Notification, MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { tokenName } from '@/settings'
import { encrypt } from '@/utils/jsencrypt'
import { generatekey, aesEncrypt } from '@/utils/aes'
import { Loading } from 'element-ui'; axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'; // 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 10000
}); // 等待框实例
let requestLoading = undefined; // request拦截器
service.interceptors.request.use(config => {
// 扩展参数
let extCfg = config.extCfg || {};
// 是否需要设置 token
const isToken = (config.headers || {}).isToken === false;
if (getToken() && !isToken) {
config.headers[tokenName] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
// 是否加密传输
if (extCfg && extCfg.security === true) {
config.headers["security"] = "securityData";
const contentType = config.headers['Content-Type'] || "application/json;charset=UTF-8";
const aesKey = generatekey(16);
let newData = {
key: encrypt(aesKey),
data: aesEncrypt(JSON.stringify(config.data), aesKey)
}
if (contentType.indexOf("/json") > 0 && config.method && config.method.toLocaleUpperCase !== "GET") {
newData = JSON.stringify(newData);
}
config['data'] = newData;
}
// 不启动Loading框
if (extCfg && extCfg.noLoading !== true) {
requestLoading = Loading.service({
fullscreen: true,
text: '数据加载中......',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
}
return config
}, error => {
if (requestLoading) {
requestLoading.close();
}
console.log(error)
Promise.reject(error)
}); // 响应拦截器
service.interceptors.response.use(res => {
if (requestLoading) {
requestLoading.close();
}
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const msg = res.data.msg || errorCode[code] || errorCode['default'];
if (code === 401 || code === '401') {
MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('LogOut').then(() => {
location.reload();
})
})
} else if (code === 500 || code === '500') {
Message({
message: msg,
type: 'error'
})
return Promise.reject(new Error(msg))
} else if (code !== 200 && code !== '200') {
Notification.error({
title: msg
});
return Promise.reject(new Error(msg));
} else {
return res.data
}
},
error => {
console.log('err' + error) if (requestLoading) {
requestLoading.close();
} let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
}
else if (message.includes("timeout")) {
message = "系统接口请求超时";
}
else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
Message({
message: message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
); export default service

若依封装的request.js的更多相关文章

  1. react request.js 函数封装

    1.request.js  函数封装 import { Toast } from 'antd-mobile'; import axios from 'axios'; import store from ...

  2. DES加密解密 与 Cookie的封装(C#与js互相加密解密)

    2D JS框架 - DES加密解密 与 Cookie的封装(C#与js互相加密解密)   这次实现了JS端的DES加密与解密,并且C#端也能正确解析DES的密文(反之也实现了) 使用的代码如下,非常方 ...

  3. 微信小程序设置全局请求URL 封装wx.request请求

    app.js: App({ //设置全局请求URL globalData:{ URL: 'https://www.oyhdo.com', }, /** * 封装wx.request请求 * metho ...

  4. uni-app 封装接口request请求

    我们知道一个项目中对于前期架构的搭建工作对于后期的制作有多么重要,所以不管做什么项目我们拿到需求后一定要认真的分析一下,要和产品以及后台沟通好,其中尤为重要的一个环节莫过于封装接口请求了.因为前期封装 ...

  5. uniapp封装uni.request请求

    封装一个uniapp请求 新建一个http.js文件封装uni.request const BASE_URL = process.env.NODE_ENV === 'development' ? '' ...

  6. Vue项目搭建常用的配置文件,request.js和vue.config.js

    request.js用来请求数据,封装的代码如下: import axios from 'axios' const request = axios.create({ timeout: 5000 }) ...

  7. 自己封装的一个JS分享组件

    因为工作的需求之前也封装过一个JS分享插件,集成了我们公司常用的几个分享平台. 但是总感觉之前的结构上很不理想,样式,行为揉成一起,心里想的做的完美,实际上总是很多的偏差,所以这次我对其进行了改版. ...

  8. 封装常用的js(Base.js)——【01】理解库,获取节点,连缀,

    封装常用的js(Base.js)——[01]理解库,获取节点,连缀,  youjobit07 2014-10-10 15:32:59 前言:       现如今有太多优秀的开源javascript库, ...

  9. ASP.Net MVC4中封装CSS和js冗余代码(不让其大篇的显示在前台上)

    (1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用.   由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using Syst ...

  10. 尝试封装自己的js库

    学了js,用过jquery,然后想着让自己在js这一块有更深的提高,就想尝试着封装自己的js库,偶尔就添加自己想到的功能.有参考过其他大牛封装库的方法,不懂的地方也有借鉴过,但代码还是自己想,自己理解 ...

随机推荐

  1. 使用 PostgreSQL 16.1 + Citus 12.1 作为多个微服务的分布式 Sharding 存储后端

    在本教程中,我们将使用 PostgreSQL 16.1 + Citus 12.1 作为多个微服务的存储后端,演示此类集群的样例设置和基本操作. Citus 12.1 实验环境设置 Docker 快速启 ...

  2. STM32CubeMX教程3 GPIO输入 - 按键响应

    1.准备材料 开发板(STM32F407G-DISC1) ST-LINK/V2驱动 STM32CubeMX软件(Version 6.10.0) keil µVision5 IDE(MDK-Arm) 2 ...

  3. electron入门之试调工具remote(三)

    electron入门到入土,从渲染线程中创建新窗口.2022-03-21入门版本17.1.2 electron重要概念,只有一个主线程,其他都是渲染进程或者叫子线程,他们不能直接相互操作,可以通过ip ...

  4. ClickHouse的JOIN算法选择逻辑以及auto选项

    ClickHouse的JOIN算法选择逻辑以及auto选项 ClickHouse中的JOIN的算法有6种: Direct; Partial merge; Hash; Grace hash; Full ...

  5. 文心一言 VS 讯飞星火 VS chatgpt (59)-- 算法导论6.4 3题

    文心一言 VS 讯飞星火 VS chatgpt (59)-- 算法导论6.4 3题 三.对于一个按升序排列的包含 n 个元素的有序数组 A 来说,HEAPSORT 的时间复杂度是多少?如果 A 是降序 ...

  6. Python 初学者必看:Python 异常处理集合

    摘要:作为 Python 初学者,在刚学习 Python 编程时,经常会看到一些报错信息,本文专门介绍 python 异常处理. 异常 广义上的错误分为错误和异常 错误指的是可以人为避免 异常是指在语 ...

  7. 云小课|云小课带您快速了解LTS可视化查看

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要: 可视化查看是日志 ...

  8. VS Code摸鱼神器,让你快速开发AI模型

    摘要:ModelArts VS Code插件一键接入云上开发环境介绍及操作指导 对于习惯于使用本地VS Code IDE的开发者,受限于本地资源,采用本地开发加云上调测的远程开发方式不失为一种更好的选 ...

  9. 应对全场景AI框架部署挑战,MindSpore“四招”让你躺平

    摘要:所谓全场景AI,是指可以将深度学习技术快速应用在云边端不同场景下的硬件设备上,包括云服务器.移动终端以及IoT设备等等,高效运行并能有效协同. 本文分享自华为云社区<AI框架的挑战与Min ...

  10. 在Spark Scala/Java应用中调用Python脚本,会么?

    摘要:本文将介绍如何在 Spark scala 程序中调用 Python 脚本,Spark java程序调用的过程也大体相同. 本文分享自华为云社区<[Spark]如何在Spark Scala/ ...