typescript
复制代码
import axios, {type AxiosInstance} from "axios"; // AxiosInstance (axios的配置好的类型定义)
import qs from 'qs'; // 引入qs处理字符串的解析和序列化
// 定义 promise 类型
interface Result<T> {
code:number;
message:string;
data: T;
total?: number;
}
export default class request {
axiosFun: AxiosInstance; // 声明初始化的属性
constructor() {
// 设置连接地址和超时时间还有凭证
this.axiosFun = axios.create({
timeout: 1000 * 60 * 5,
baseURL: "http://localhost:8888/",
withCredentials: true,
});
// 统一增加请求头 也可以根据路径判断来添加请求头
this.axiosFun.interceptors.request.use((config:any)=>{
config.headers.token = localStorage.token || '';
return config;
});
// 请求返回后的统一处理 在这里可以处理返回的不同状态码
this.axiosFun.interceptors.response.use((res:any)=>{
if (res.headers["content-disposition"]) {
return res;
}
},(err:any)=>{
return Promise.resolve(err)
});
}
//get请求
public static getFetch(url: string, data?: any): Promise<Result<object>> {
return new Promise((resolve, reject) => {
new request().axiosFun.get(url, { params: data })
.then((result:any) => {
resolve(result)
})
.catch((error:any) => {
reject(error)
})
})
}
//post json请求
public static postJson<T>(url: string, data?: any): Promise<Result<object>> {
return new Promise((resolve, reject) => {
new request().axiosFun.post(url, JSON.stringify(data), { headers: {'Content-Type': 'application/json;charset=UTF-8'} })
.then((result:any) => {
resolve(result)
})
.catch((error:any) => {
reject(error)
})
})
}
//post formData请求
public static postFormData(url: string, data?: any): Promise<Result<object>> {
return new Promise((resolve, reject) => {
new request().axiosFun.post(url, data,{ headers: {'Content-Type': 'multipart/form-data'} })
.then((result:any) => {
resolve(result)
})
.catch((error:any) => {
reject(error)
})
})
}
//post 表单请求
public static postFormUrlencoded(url: string, data?: any): Promise<Result<object>> {
return new Promise((resolve, reject) => {
new request().axiosFun.post(url, qs.stringify(data, {indices: false})).then((result:any) => {
resolve(result)
}).catch((error:any) => {
reject(error)
})
})
}
//post json请求 返回blob
public static postFileJson<T>(url: T, data?: any): Promise<Result<object>> {
return new Promise((resolve, reject) => {
new request().axiosFun.post(url as string, JSON.stringify(data), { headers: {'Content-Type': 'application/json;charset=UTF-8'},responseType:'blob' })
.then((result:any) => {
fileData(result);
})
.catch((error:any) => {
reject(error)
})
})
}
//get 下载文件 返回blob
public static getFileFetch(url: string, data?: any): Promise<Result<object>> {
return new Promise((resolve, reject) => {
new request().axiosFun.get(url, { params: data,responseType: "blob" }).then((result:any) => {
fileData(result);
}).catch((error:any) => {
reject(error)
})
})
}
}
// 封装 a 标签下载文件
const fileData = (result:any)=>{
let fileName:string = result.headers['content-disposition'].split('fileName=')[1]
fileName = decodeURIComponent(fileName)
let blob:Blob = new Blob([result.data])
const fileUrl:string = URL.createObjectURL(blob)
const download:any = document.createElement('a')
download.download = fileName
download.style.display = 'none'
download.href = fileUrl
document.body.appendChild(download)
download.click()
document.body.removeChild(download)
URL.revokeObjectURL(fileUrl)
return
}