request.ts 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. import axios from "axios";
  2. import { showMessage } from "./errorStatusCode"; // 引入状态码文件
  3. import type { AxiosRequestConfig, AxiosResponse, AxiosError } from "axios";
  4. import { ElNotification } from "element-plus";
  5. import { useStore } from "../store/index";
  6. const baseURL = "/api";
  7. // 创建axios实例
  8. const instance = axios.create({
  9. baseURL, // 设置API的基础URL
  10. });
  11. // 请求拦截器
  12. instance.interceptors.request.use(
  13. (config: AxiosRequestConfig): any => {
  14. // 可在请求发送前对config进行修改,如添加请求头等
  15. const { getToken } = useStore();
  16. const token = getToken;
  17. const headers = config.headers || {};
  18. headers["Token"] = token;
  19. config.headers = headers;
  20. return config;
  21. },
  22. (error: AxiosError) => {
  23. // 处理请求错误
  24. return Promise.reject(error);
  25. }
  26. );
  27. // 响应拦截器
  28. instance.interceptors.response.use(
  29. (response: AxiosResponse) => {
  30. // 对响应数据进行处理
  31. if (response.status !== 200 || response.data.code === "error") {
  32. ElNotification.closeAll();
  33. ElNotification({
  34. message:
  35. response.status !== 200
  36. ? showMessage(response.status)
  37. : response.data.msg,
  38. type: "error",
  39. });
  40. }
  41. return response;
  42. },
  43. (error: AxiosError) => {
  44. ElNotification.closeAll();
  45. ElNotification({
  46. message: showMessage(error.request.status), // 传入响应码,匹配响应码对应信息,
  47. type: "error",
  48. });
  49. // 处理响应错误
  50. return Promise.reject(error);
  51. }
  52. );
  53. // 封装GET请求
  54. export async function get(
  55. url: string,
  56. params?: any,
  57. file: boolean = false
  58. ): Promise<any> {
  59. return new Promise((resolve, reject) => {
  60. instance
  61. .get(url, { params })
  62. .then(({ data }: any) => {
  63. const { code } = data;
  64. if (code === "ok" || file) {
  65. resolve(data);
  66. return;
  67. }
  68. reject(data);
  69. })
  70. .catch((error) => {
  71. reject(error);
  72. });
  73. });
  74. }
  75. // 封装POST请求
  76. export async function post(url: string, data?: any): Promise<any> {
  77. return new Promise((resolve, reject) => {
  78. instance
  79. .post(url, data, {
  80. headers: {
  81. "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
  82. },
  83. })
  84. .then(({ data }: any) => {
  85. const { code } = data;
  86. if (code === "ok") {
  87. resolve(data);
  88. return;
  89. }
  90. reject(data);
  91. })
  92. .catch((error) => {
  93. reject(error);
  94. });
  95. });
  96. }
  97. // 封装文件上传请求
  98. export async function uploadFile(url: string, data?: any): Promise<any> {
  99. return new Promise((resolve, reject) => {
  100. instance
  101. .post(url, data, {
  102. headers: {
  103. "Content-type": "multipart/form-data",
  104. },
  105. })
  106. .then(({ data }: any) => {
  107. const { code } = data;
  108. if (code === "ok") {
  109. resolve(data);
  110. return;
  111. }
  112. reject(data);
  113. })
  114. .catch((error) => {
  115. reject(error);
  116. });
  117. });
  118. }
  119. // 封装文件流请求(下载)
  120. export async function downloadFileRequest(url: string, params?: any): Promise<Blob> {
  121. return new Promise((resolve, reject) => {
  122. instance
  123. .get(url, {
  124. params,
  125. responseType: "blob", // 设置响应类型为 blob 以处理文件流
  126. })
  127. .then((response: AxiosResponse<Blob>) => {
  128. // 判断 blob 是否为错误信息(如后端返回错误内容也可能是 JSON)
  129. const contentType = response.headers["content-type"];
  130. if (contentType && contentType.includes("application/json")) {
  131. const reader = new FileReader();
  132. reader.onload = () => {
  133. const result = reader.result as string;
  134. try {
  135. const json = JSON.parse(result);
  136. ElNotification({
  137. message: json.msg || "下载失败",
  138. type: "error",
  139. });
  140. reject(json);
  141. } catch (e) {
  142. resolve(response.data);
  143. }
  144. };
  145. reader.readAsText(response.data);
  146. } else {
  147. resolve(response.data);
  148. }
  149. })
  150. .catch((error) => {
  151. ElNotification({
  152. message: showMessage(error.request.status),
  153. type: "error",
  154. });
  155. reject(error);
  156. });
  157. });
  158. }