axios做统一请求和拦截

本文介绍如何使用Axios库进行HTTP请求,并设置了全局的基础URL和超时时间。此外,还实现了登录状态的拦截检查及特定类型文件流的响应处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前置条件

import axios from "axios";
import { Message, MessageBox } from "element-ui";
import store from "../store";
import { getToken } from "@/utils/token";

统一设置请求头 


// 创建axios实例

// https://www.kancloud.cn/yunye/axios/234845

const service = axios.create({

baseURL: process.env.BASE_API, // api的base_url

timeout: 5000, // 请求超时时间

// 所有请求都以Json形式传送

// 会有预检请求,服务端需要正常通过OPTIONS请求

// http://www.ruanyifeng.com/blog/2016/04/cors

headers: {

'Content-type': 'application/json;charset=UTF-8'

}

})

登录拦截 和 文件流拦截

// response拦截器

service.interceptors.response.use(

response => {

// console.log(response)

const headers = response.headers

if (response.data.code === 200) {

return response.data

// 拦截octet-stream 或 vnd.ms-excel 或 vnd.openxmlformats-officedocument.spreadsheetml.sheet 文件流并处理

} else if (headers['content-type'] === 'application/octet-stream;charset=utf-8' || headers['content-type'] === 'application/vnd.ms-excel;charset=utf-8' || headers['content-type'] === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8') {

// console.log(response)

return response.data

} else {

Message({

message: response.data.message,

// message: response.data.msg,

type: 'error',

duration: 5 * 1000

})

return Promise.reject('error')

}

},

error => {

// 401:需要认证

// if (error.response.code === 401) {

if (error.response && error.response.status === 401) {

MessageBox.confirm('需要重新登录', '登录', {

confirmButtonText: '登录',

cancelButtonText: '取消',

type: 'warning'

}).then(() => {

store.dispatch('FedLogout').then(() => {

location.reload()// 为了重新实例化vue-router对象 避免bug

})

})

} else {

Message({

message: error.response && error.response.data.message,

// message: error.response.data.msg,

type: 'error',

duration: 5 * 1000

})

}

return Promise.reject(error)

}

)

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值