vue api封装 request.js
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth' // 创建axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api的base_url
timeout: 50000 // 请求超时时间
}) // request拦截器
service.interceptors.request.use(config => {
config.headers['tenantId'] = store.getters.tenantid if (store.getters.token) {
config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
} if (store.getters.isIdentityAuth) {
config.headers['Authorization'] = 'Bearer ' + store.getters.oidcAccessToken
} return config
}, error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}) // respone拦截器
service.interceptors.response.use(
response => {
/**
* code为非200是抛错 可结合自己业务进行修改
*/
const res = response.data
if (res.code !== 200) {
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
MessageBox.confirm('登录已超时,可以【取消】继续留在该页面,或者【重新登录】', '超时提醒', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug
})
})
} else {
Message({
message: res.message || res.msg,
type: 'error',
duration: 5 * 1000
})
}
return Promise.reject('error')
} else {
return response.data
}
},
error => {
if(error.response && error.response.status == 400){ //调用远程服务时,前端类型和后端不匹配 var message = '<strong>'+error.response.data.detail +'</strong><br>'
//异常信息需要特殊处理一下
var errors = Object.entries(error.response.data.errors).map(([key, value]) => ({key,value}));
errors.forEach(item=>{
message +=item.key +":" item.value.forEach(dtl =>{
message +=" " +dtl;
}) message +="<br>";
})
Message({
dangerouslyUseHTMLString: true,
message: message,
type: 'error',
duration: 10 * 1000
})
}else{
Message({
message: '请先启动OpenAuth.WebApi,再刷新本页面,异常详情:' + error.message,
type: 'error',
duration: 10 * 1000
})
}
return Promise.reject(error)
}
) export default service
1.封装API
使用场景:业务中最常见最普通的封装
步骤一:
步骤二:
一般放在src 下的api 文件夹
步骤三:
vue api封装 request.js的更多相关文章
- Vue项目搭建常用的配置文件,request.js和vue.config.js
request.js用来请求数据,封装的代码如下: import axios from 'axios' const request = axios.create({ timeout: 5000 }) ...
- vue学习过程总结(07) - vue的后台服务API封装及跨域问题的解决
以登录流程为例说明接口的封装. 1.登录调用后台的登录api 登录界面的代码 <template> <div class="login-page"> < ...
- react request.js 函数封装
1.request.js 函数封装 import { Toast } from 'antd-mobile'; import axios from 'axios'; import store from ...
- 小程序封装request请求,统一API
程序开发中都会调用后端工程师开发的API,小程序的开发文档提供了相对实用的APIwx.request(),但是在开发的过程中,又遇到了一些问题,在小程序的项目开发时,调用的API不止一个,同一个API ...
- vue项目封装 axios 和 api
一,utils文件夹下新建一个request.js文件 import axios from 'axios'; import QS from 'qs'; import { Toast } from 'v ...
- vue中封装一个全局的弹窗js
/** * Created by yx on 2017/12/21. */ export default { /** * 带按钮的弹框 * <!--自定义提示标题,内容,单个按钮事件--> ...
- Vue axios封装 实现请求响应拦截
封装 axios.js import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constru ...
- uniapp 封装 request 并 配置跨域,( 本地 + 线上 + 封装 )
找到上面这个 文件,不管是用 命令创建 还是 用 HBX 创建,都一样会有这个文件的,然后跟着截图复制粘贴就好了. // 这是配置本地能跨域的,或者你可以直接让后端给你设置请求头,避免了跨域. &qu ...
- Vue在单独引入js文件中使用ElementUI的组件
Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...
- 15、vue项目封装axios并访问接口
1.在src下新建util文件夹,在util下新建request.js文件: 封装axios: import axios from 'axios' import QS from 'qs'; // im ...
随机推荐
- 【Linux】通过Crontab和shell脚本实现定期备份和删除PG数据库表数据
〇.参考资料 一.Crontab使用 1.查看状态 service crond status 2.新建crontab任务 crontab -e 输入字符串 * * * * * cd /home/big ...
- 【每日一题】【递归+int型返回值最后不接收】110. 平衡二叉树-211231/220221
给定一个二叉树,判断它是否是高度平衡的二叉树. 本题中,一棵高度平衡二叉树定义为: 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1 . 答案: public class Solution ...
- 你真的了解 RSA 加密算法吗?
作者:小傅哥 博客:https://bugstack.cn 源码:https://github.com/fuzhengwei/java-algorithms 沉淀.分享.成长,让自己和他人都能有所收获 ...
- ChatGPT杀疯了,这人工智能也太离谱了吧
转载请注明出处️ 作者:测试蔡坨坨 原文链接:caituotuo.top/2ac8440d.html 你好,我是测试蔡坨坨. 这几天被ChatGPT刷屏,各大网站平台都能看到关于它的文章和视频,上线短 ...
- 《HTTP权威指南》– 3.HTTP方法和状态码
常见HTTP方法: 常用HTTP方法 描述 是否包含主体 GET 从服务器获取一份文档 否 HEAD 只从服务器获取文档的首部 否 POST 向服务器发送需要处理的数据 是 PUT 将请求的主体部分存 ...
- Django框架版本区别
目录 一:django版本区别 1.django1.X路由层使用的是url方法 2.虽然path不支持正则 但是它的内部支持五种转换器 3.五种转换器 4.除了有默认的五个转换器之外 还支持自定义转换 ...
- APP异常测试点汇总
在测试APP时异常测试是非常必要的. 安装卸载中的异常测试 一.安装 安装过程中设备重启 安装过程中息屏 安装过程中断网 安装过程中切换网络 安装过程中收到短信提醒 安装过程中收到来电提醒 安装过程中 ...
- VSCTF的Recovery
题目如下: from random import randint from base64 import b64encode def validate(password: str) -> bool ...
- vulnhub靶场之HACKABLE: III
准备: 攻击机:虚拟机kali.本机win10. 靶机:Hackable: III,下载地址:https://download.vulnhub.com/hackable/hackable3.ova,下 ...
- Kali Win-KeX SL
内容: 概述 先决条件 用法 开始 声音支持 多屏支持 停止 概述 无缝模式下的 Win-KeX 将在 Windows 桌面的屏幕顶部启动 Kali Linux 面板. 通过面板启动的应用程序将与 M ...