element中封装axios如何实现哀求函数自界说loading

用户云卷云舒  论坛元老 | 2024-11-21 15:57:26 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1035|帖子 1035|积分 3105

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
我们的目的是想实现一个基于axios封装的函数，可以传入一个参数loading，当参数为true时，表现加载动画。不传时则不表现loading。
我们来实现
第一个版本：

首先我们写一个简朴的node服务：

  1. import  express from 'express';
  2. import cors from "cors"
  3. const app=new express()
  4. app.use(cors())
  5. app.use(express.static("public"))
  6. app.use(express.json());
  7. app.use(express.urlencoded({ extended: true }));
  9. app.post('/api/error',(req,res)=>{
  10.     console.log("accpet_beab--req---",req.url)
  11.     console.log("accpet_beab--req--data-",req.body)
  12.     res.send({
  13.         message:"ok"
  14.     })
  15. })
  17. app.get("/api/list",(req,res)=>{
  18.     console.log("query",req.query)
  19.     setTimeout(()=>{
  20.         res.json({ message: 'Protected route', data:[
  21.             {id:"11",name:"aaa"},
  22.             {id:"22",name:"bbb"},
  23.             {id:"33",name:"ccc"},
  24.         ] });
  25.     },4000)
  27. })
  30. app.post("/api/marks",(req,res)=>{
  31.     console.log("query",req.query)
  32.     setTimeout(()=>{
  33.         res.json({ message: 'Protected route', data:[
  34.             {id:"11",method:"post"},
  35.             {id:"22",method:"post"},
  36.             {id:"33",method:"post"},
  37.         ] });
  38.     },4000)
  40. })
  43. app.get("/api/log",(req,res)=>{
  44.    
  45.     res.send({
  46.         msg:"log",
  47.         data:{
  48.             name:"asage",
  49.             age:30
  50.         },
  51.         status:"ok"
  52.     })      
  54. })
  56. app.listen(4200,()=>{
  57.     console.log("服务启动成功")
  58. })
复制代码
基于axios的封装

  1. import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios'
  2. import { ElLoading, ElMessage } from 'element-plus'
  3. import type { IResponseData, ExAxiosRequestConfig } from '@/types/core/axios'
  4. import { ENV_DEV, TIMEOUT_TIME } from '@/config/project'
  5. import { checkReturnStatus } from './fun'
  6. import { userStore } from '@/stores/user'
  7. import router from '@/router'
  9. let loadingInstance: any = null
  11. export const service = axios.create({
  12.   baseURL: MODE === ENV_DEV ? '' : VITE_BASE_URL, //这里也可以使用变量
  13.   timeout: TIMEOUT_TIME, //超时设置
  14.   //withCredentials: true, //异步请求携带cookie
  15.   headers: {
  16.   }
  17. })
  19. //request interceptor  请求拦截器
  20. service.interceptors.request.use(
  21.   (config: InternalAxiosRequestConfig) => {
  22.     const { token } = userStore()
  23.     //针对post/put等请求处理
  24.     if (config?.data?.showLoading) {
  25.       loadingInstance = ElLoading.service({
  26.         fullscreen: true,
  27.         text: '正在加载',
  28.         spinner: 'el-icon-loading',
  29.         background: 'rgba(0, 0, 0, 0.3)'
  30.       })
  31.     }
  32.     //针对get/delete等请求处理
  33.     if (config?.params?.showLoading) {
  34.       loadingInstance = ElLoading.service({
  35.         fullscreen: true,
  36.         text: '正在加载',
  37.         spinner: 'el-icon-loading',
  38.         background: 'rgba(0, 0, 0, 0.3)'
  39.       })
  40.     }
  41.     config.headers.token = `${token || ''}`
  42.     return config
  43.   },
  44.   (error) => {
  45.     console.log('request--error', error)
  46.     return Promise.reject(error)
  47.   }
  48. )
  50. //响应拦截器
  51. service.interceptors.response.use(
  52.   (response: AxiosResponse): AxiosResponse<IResponseData> => {
  53.    
  54.     if (loadingInstance) {
  55.       loadingInstance.close()
  56.     }
  57.     if (response.status !== 200) {
  58.       
  59.       const err = {
  60.         data: {},
  61.         errcode: -99999,
  62.         errmsg: '请求失败!'
  63.       }
  64.       // Promise.reject(err);
  65.       throw err
  66.     }
  67.     if (response.headers.token) setToken(response.headers.token)
  69.     const res = response.data
  70.    
  71.     const status = checkReturnStatus(res.errcode)
  72.     switch (status) {
  73.       case -1:
  74.         ElMessage.error('登录信息已发生改变,请重新登录!')
  75.         throw res
  76.       case 0:
  77.         ElMessage.error('系统繁忙,请稍后再试!')
  78.         throw res
  79.       case 1:
  80.         console.log('case----1-', res)
  81.         return res
  82.       case -2:
  83.         ElMessage.error(res.errmsg)
  84.         throw res
  85.       case 70003:
  86.         ElMessage({
  87.           message: res.errmsg,
  88.           type: 'error',
  89.           duration: 1500
  90.         })
  91.         throw res
  92.     }
  93.   },
  94.   (error) => {
  95.     // 在响应错误的时候的逻辑处理
  96.     if (error.code === 'ECONNABORTED' || error.message === 'Network Error' || error.message.includes('timeout')) {
  97.       ElMessage({ type: 'error', message: '当前网络错误' })
  98.     }
  99.     return Promise.reject(error)
  100.   }
  101. )
  103. // class HTTP {
  104. export const http = {
  105.   get(url: string, config: InternalAxiosRequestConfig & any = {}, showLoading = false) {
  106.     config = { ...config.params, showLoading }
  107.     return new Promise((resolve, reject) => {
  108.       service
  109.         .get(url, config)
  110.         .then((res) => {
  111.           resolve(res)
  112.         })
  113.         .catch((err) => {
  114.           reject(err)
  115.         })
  116.     })
  117.   },
  118.   post(url: string, config: InternalAxiosRequestConfig & any = {}, showLoading = false) {
  119.     return new Promise((resolve, reject) => {
  120.       config = { ...config, showLoading }
  121.       service
  122.         .post(url, config)
  123.         .then((res) => {
  124.           resolve(res)
  125.         })
  126.         .catch((err) => {
  127.           reject(err)
  128.         })
  129.     })
  130.   },
  131.   delete(url: string, config: InternalAxiosRequestConfig & any = {}, showLoading = false) {
  132.     config = { ...config.params, showLoading }
  133.     return new Promise((resolve, reject) => {
  134.       service
  135.         .delete(url, config)
  136.         .then((res) => {
  137.           resolve(res)
  138.         })
  139.         .catch((err) => {
  140.           reject(err)
  141.         })
  142.     })
  143.   },
  144.   put(url: string, config: InternalAxiosRequestConfig & any = {}, showLoading = false) {
  145.     return new Promise((resolve, reject) => {
  146.       config = { ...config, showLoading }
  147.       service
  148.         .put(url, config)
  149.         .then((res) => {
  150.           resolve(res)
  151.         })
  152.         .catch((err) => {
  153.           reject(err)
  154.         })
  155.     })
  156.   }
  157. }
复制代码
再看一看详细的http哀求

  1. export function getAllRolesData(params): Promise<IResponseData> {
  2.   return http.post('/api/permission/getAllMenu', params, false)
  3. }
复制代码
以上根本上就可以实现了我们的自界说loading结果。我们传入的第三个参数可以自主的控制当前哀求是否需要实现loading。
但是这里有一个标题：就是我们的全部哀求。都会在参数列表中带上了一个loading的无用参数。
那我们是否有办法实现我们的业务哀求中依然带上这个参数loading，但是我们真实的http哀求中
却没有出现呢？
答案是有的。这里我们要针对post/get哀求单独做处理。改进后的代码
第二版

  1. import axios from 'axios';
  2. import { ElLoading } from 'element-plus';
  4. // 创建 axios 实例
  5. const service = axios.create({
  6.   baseURL: '', // 根据你的需要设置基础URL
  7.   timeout: 5000 // 请求超时时间
  8. });
  10. // 请求拦截器
  11. service.interceptors.request.use(
  12.   config => {
  13.     // 在这里可以进行一些请求前的操作，例如添加token等
  14.     return config;
  15.   },
  16.   error => {
  17.     // 请求错误时的操作
  18.     return Promise.reject(error);
  19.   }
  20. );
  22. // 响应拦截器
  23. service.interceptors.response.use(
  24.   response => {
  25.     // 请求成功后的操作
  26.     return response;
  27.   },
  28.   error => {
  29.     // 响应错误时的操作
  30.     return Promise.reject(error);
  31.   }
  32. );
  34. // 请求转换函数，用于移除请求配置中的 loading 参数
  35. service.defaults.transformRequest = [
  36.   function (data) {
  37.     debugger
  38.     // 检查 data 是否是对象，并且有 loading 属性
  39.     if (data && typeof data === 'object' && 'loading' in data) {
  40.       // 移除 data 中的 loading 属性
  41.       const { loading, ...configWithoutLoading } = data;
  42.     //   debugger
  43.       return configWithoutLoading;
  44.     }
  45.     // 如果 data 不是对象或者没有 loading 属性，则直接返回
  46.     return data;
  47.   }
  48. ];
  50. // 封装请求函数
  51. function request(config) {
  52.   // 处理 loading 动画
  53.   let loadingInstance = null;
  54.   if (config.loading) {
  55.     loadingInstance = ElLoading.service({ fullscreen: true });
  56.   }
  57.   //针对get进行处理
  58.   if (config.method === 'get' && config.params) {
  59.     // 对 params 做一些额外处理
  60.     const { loading, ...paramsWithoutLoading } = config.params || {};
  61.     config.params = paramsWithoutLoading;
  62.     // debugger
  63.   }
  65.   // 发送请求
  66.   return service(config).finally(() => {
  67.     // 请求完成后关闭加载动画（如果存在）
  68.     if (loadingInstance) {
  69.       loadingInstance.close();
  70.     }
  71.   });
  72. }
  74. // 导出封装后的请求函数
  75. export default request;
复制代码
在详细页面中进行使用：

  1. import {request} from "../utils/http2"
  2. request(
  3.   "/api/list",
  4.   'get',
  5.   {
  6.     pageNo:1,
  7.     pageSize:10
  8.   },
  9.   true
  10. ).then(res=>{
  11.     console.log("list---res",res)
  13. }).catch(err=>{
  14.     console.log("err",err)
  15. })
复制代码
这里的核心就是单独针对post和get哀求做处理。针对post，我们通过transformRequest对post哀求中的data进行改造，去掉loading参数。而针对get哀求，则通过config.params去掉loading。如许就可以实现自主可控的loading
提醒：这里有个地方要特别留意。
  1. // 请求转换函数，用于移除请求配置中的 loading 参数
  2. service.defaults.transformRequest = [
  3.   function (data) {
  4.     debugger
  5.     // 检查 data 是否是对象，并且有 loading 属性
  6.     if (data && typeof data === 'object' && 'loading' in data) {
  7.       // 移除 data 中的 loading 属性
  8.       const { loading, ...configWithoutLoading } = data;
  9.     //   debugger
  10.       return configWithoutLoading;
  11.     }
  12.     // 如果 data 不是对象或者没有 loading 属性，则直接返回
  13.     return data;
  14.   }
  15. ];
复制代码
这里假如我们在真实的http哀求中发现对于post/put哀求的request payload是[object,object]，是因为我们没有把post哀求参数序列化。所以我们要做一点修正
  1. //针对post/put请求处理loading参数问题
  2. service.defaults.transformRequest = [
  3.   function (data) {
  4.     if (data && typeof data === 'object' && 'loading' in data) {
  5.       // 移除 data 中的 loading 属性
  6.       const configWithoutLoading = JSON.parse(JSON.stringify(data))
  7.       delete configWithoutLoading.loading
  8.       return JSON.stringify(configWithoutLoading)
  9.     }
  10.     // 如果 data 不是对象或者没有 loading 属性，则直接返回
  11.     return JSON.stringify(data)
  12.   }
  13. ]
复制代码
如许就正常得到参数了

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

用户云卷云舒

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表