vue2封装axios接口代码
2023-06-13 09:18:15 时间
@toc
在/utils新建request
import axios from 'axios'
import bus from '@/utils/bus'
import {Message} from 'element-ui'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// baseURL: '/api', // url = base url + request url
timeout: 100000, // request timeout
})
service.interceptors.request.use(
config => {
let currentUser = JSON.parse(sessionStorage.getItem("UserInfo"))
if (currentUser && currentUser.token) {
config.headers['Authorization'] = 'token ' + currentUser.token
}
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => {
return response
},
error => {
const res = error.response.data
const status = error.response.status
if (status >= 500) {
Message.error('服务繁忙请稍后再试')
} else if (status >= 400) {
if (res.status === 401) {
Message.warning("您的账号登录已失效, 请重新登录")
bus.$emit('logout')
} else {
Message.error("未知错误")
console.error(error)
}
}
return Promise.resolve(error)
}
)
export default service
接口js页面中
// 卡片管理模块
import request from '@/utils/request'
// get
export function getList(params) {
return request({
url: '/',
method: 'get',
params
})
}
// POST
export function postList(data) {
return request({
url: '/',
method: 'POST',
responseType: "arraybuffer",
data
})
}
vue页面
//引入
import {
getList,
postList
} from "@/api/comparison.js";
//使用
getList().then((res) => {
});
相关文章
- fpga学习——zynq图像处理中的DVP流接口封装
- Java基础入门笔记05——面向对象,创建对象的内存分析,继承,封装,多态,object类,this&&super,方法重写,引用类型的强制转换,instanceof,抽象类,内部类,接口,异常。[通
- ue4封装接口_ue4导出模型
- 微信小程序登录token问题==封装在request请求中
- VUE组件封装_vue组件内部双向绑定
- PyFlipper:一款功能强大的Flipper Zero命令行接口封装器
- 封装avalonia指定组件允许拖动的工具类
- Python 封装SNMP调用接口
- C++基础——C++面向对象之数据封装、数据抽象与接口基础总结
- Cadence 16.6 Allegro如何同时对齐多个封装?
- 【C++修炼之路】23.哈希封装unordered系列
- 批量采集淘宝商品详情数据接口,商品价格,商品销量,商品优惠券,商品视频数据接口封装代码教程
- Python 接口测试之获取接口数据封装
- Python 接口测试之接口关键字封装
- Python 接口测试之Excel表格数据操作方法封装
- mongodb操作的模块手动封装
- js封装好的模仿qq消息弹窗代码详解编程语言
- 使用java执行命令简易封装类详解编程语言
- PHP封装、继承和多态
- C封装MySQL数据库访问应用(cmysql封装)
- 类PHPMySQL 封装类:让开发变得更轻松(phpmysql封装)
- 如何有效封装Redis(怎么封装redis)
- javascript面向对象编程基础:封装
- C++选择文件夹代码的封装