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. DeprecationWarning: collection.ensureIndex is deprecated. Use createIndexes instead

    // 引入mongoose模块 const mongoose = require('mongoose'); // 链接数据库 mongoose.set('useCreateIndex', true)  ...

  2. 自研分布式高性能RPC框架及服务注册中心实践笔记【原创】【开源】

    痛点 1. bsf底层依赖springcloud,影响bsf更新springboot新版本和整体最新技术版本升级. 2. eureka已经闭源,且框架设计较重,同时引入eureka会自行引入较多spr ...

  3. 如何让铁威马NAS可以通过互联网访问?

    当你在家或者出差去外地时候,可能要通过互联网访问你的TNAS设备,而使用远程访问功能,你可以随时随地访问你的TNAS 设备.读取你TNAS 中的文件或是对你的TNAS 设备进行配置.远程访问能给你的工 ...

  4. JavaScript:输出语法

    主要有三种,如下所示:

  5. 一文告诉你AVM中设置字体的方法

    ​ avm 是一种简便的多端开发框架,可以开发APP.小程序.H5.今天学习了一下使用 avm 开发 APP 怎么设置字体,下面将经验分享给大家. 所需步骤: 1.  将需要使用的字体文件放到代码包r ...

  6. openEuler 部署Kubernetes(K8s)集群

    前言 由于工作原因需要使用 openEuler,openEuler官方文档部署K8s集群比较复杂,并且网上相关资料较少,本文是通过实践与测试整理的 openEuler 22.03 部署 Kuberne ...

  7. 基于docker容器的MySQL主从设置及efcore读写分离

    1.基于docker部署MySQL,设置主从 本操作基于已经拉取的镜像(docker pull mysql) 创建一主一从两个数据库容器 docker run -d -p 3307:3306 -e M ...

  8. Java开发网络安全常见问题

    Java开发网络安全常见问题 等闲识得东风面,万紫千红总是春 1.敏感信息明文传输 用户敏感信息如手机号.银行卡号.验证码等涉及个人隐私的敏感信息不通过任何加密直接明文传输. 如下图中小红书APP 的 ...

  9. LVGL 中图片使用问题

    此笔记主要是记录在 LVGL 中使用图片的几种方式,以及使用过程中遇到的问题.最近在 ARM linux 中使用 LVGL 时,发现加载图片变得很卡,一开始还好,当连续加载的图片变多后,特别是动画的过 ...

  10. 深入探究Java中的对象类型变量声明操作——在声明对象时,系统究竟做了什么?

    深入探究Java中的对象类型变量声明操作--在声明对象时,系统究竟做了什么? 摘要:本文主要对Java中的对象类型变量的声明的底层原理做了探究. 目录 深入探究Java中的对象类型变量声明操作--在声 ...