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的更多相关文章

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

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

  2. vue学习过程总结(07) - vue的后台服务API封装及跨域问题的解决

    以登录流程为例说明接口的封装. 1.登录调用后台的登录api 登录界面的代码 <template> <div class="login-page"> < ...

  3. react request.js 函数封装

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

  4. 小程序封装request请求,统一API

    程序开发中都会调用后端工程师开发的API,小程序的开发文档提供了相对实用的APIwx.request(),但是在开发的过程中,又遇到了一些问题,在小程序的项目开发时,调用的API不止一个,同一个API ...

  5. vue项目封装 axios 和 api

    一,utils文件夹下新建一个request.js文件 import axios from 'axios'; import QS from 'qs'; import { Toast } from 'v ...

  6. vue中封装一个全局的弹窗js

    /** * Created by yx on 2017/12/21. */ export default { /** * 带按钮的弹框 * <!--自定义提示标题,内容,单个按钮事件--> ...

  7. Vue axios封装 实现请求响应拦截

    封装 axios.js import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constru ...

  8. uniapp 封装 request 并 配置跨域,( 本地 + 线上 + 封装 )

    找到上面这个 文件,不管是用 命令创建 还是 用 HBX 创建,都一样会有这个文件的,然后跟着截图复制粘贴就好了. // 这是配置本地能跨域的,或者你可以直接让后端给你设置请求头,避免了跨域. &qu ...

  9. Vue在单独引入js文件中使用ElementUI的组件

    Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...

  10. 15、vue项目封装axios并访问接口

    1.在src下新建util文件夹,在util下新建request.js文件: 封装axios: import axios from 'axios' import QS from 'qs'; // im ...

随机推荐

  1. 【每日一题】【动态规划&二分】2022年2月9日-NC91 最长上升子序列(三)

    描述给定数组 arr ,设长度为 n ,输出 arr 的最长上升子序列.(如果有多个答案,请输出其中 按数值(注:区别于按单个字符的ASCII码值)进行比较的 字典序最小的那个) 方法1:双层循环实现 ...

  2. 一个小时,200行代码,手写Spring的IOC、DI、MVC

    一.概述 配置阶段:主要是完成application.xml配置和Annotation配置. 初始化阶段:主要是加载并解析配置信息,然后,初始化IOC容器,完成容器的DI操作,已经完成HandlerM ...

  3. Redis Lettuce长时间超时问题

    1. 背景 新上线了一个服务,在压测的时候大量返回错误,查看报错是io.lettuce.core.RedisCommandTimeoutException: Command timed out aft ...

  4. vue3 el-pagination 将 英文 修改 为 中文

    当前视图: 我要做的是将 Total 类似的 英文 改为 中文 1.  在组件里引入  ElConfigProvider 组件 和中文包 // ElConfigProvider 组件 import { ...

  5. windows下django项目创建流程

    一.创建djangoa项目 1.将python39\Scripts 加入系统环境变量. 2.django-admin startproject 项目名称 二.设置setting 1.语言设置zh-ha ...

  6. rpm和yum仓库

    一.rpm rpm从官网下,或者自研 外来的硬件设备连接到Linux上,必须挂载 rpm -qa(all) 显示当前系统中以 RPM 方式安装的所有软件列表 rpm -q 软件名 查询指定软件是否已安 ...

  7. Qt自带的阴影类、跨线程问题汇总、hover相关、全屏轮子,一些思考。

    一点思考:故事的结局重不重要? 我语文不好,但是我数学不好. 我数学不好,但是我英语不好. 我英语不好,但是我物理不好. 我物理不好,但是我化学不好. 我化学不好,但是我历史不好. 我历史不好,但是我 ...

  8. JavaScript:变量的作用域,window对象,关键字var/let与function

    为什么要将这些内容放在一起,因为他们都跟初始化有关系,我们慢慢说吧. 我们在代码中,都会声明变量.函数和对象,然后由浏览器解释器(下面简称浏览器)执行: 我们还说过,变量和对象的内存结构: 那么,是什 ...

  9. [python]《Python编程快速上手:让繁琐工作自动化》学习笔记2

    1. 读写文件笔记(第8章)(代码下载) 1.1 文件与文件路径 通过import os调用os模块操作目录,常用函数如下: 函数 用途 os.getcwd() 取得当前工作路径 os.chdir() ...

  10. Zookeeper详解(01) -概述

    Zookeeper详解(01) -概述 概念 Zookeeper是一个开源的分布式的,为分布式应用提供协调服务的Apache项目. Zookeeper从设计模式角度来理解,是一个基于观察者模式设计的分 ...