接口错误码监听方法

背景

接口请求方法使用是的内部封装的,没办法直接像axios对相应结果进行拦截处理。但是又需要请求方式尽量保持统一并且处理错误信息弹框,所以找到该办法通过Proxy代理拦截

实现

js 复制代码
// 拷贝一份
const originalRequest = request; 
// 代理拦截
request = new Proxy(originalRequest, {
  apply(target, thisArg, argumentsList) {
    return target.apply(thisArg, argumentsList).then(response => {
      // 这里可以做一些响应处理
      return response;
    }).catch(error => {
      // 这里就可以做一些错误处理
      throw error;
    });
  }
});

GPT推荐方案

  • 方法 1:使用函数劫持
js 复制代码
// 备份原始 request 方法
const originalRequest = request;

request = async function (...args) {
  try {
    const response = await originalRequest(...args);
    console.log('HTTP 状态码:', response.status);

    // 这里可以添加额外的逻辑,比如错误处理
    if (response.status >= 400) {
      console.error('请求失败:', response.status);
    }

    return response;
  } catch (error) {
    console.error('请求异常:', error);
    throw error;
  }
};

方法 2:使用 Proxy 代理 request 方法

js 复制代码
const originalRequest = request;

request = new Proxy(originalRequest, {
  apply(target, thisArg, argumentsList) {
    console.log('请求参数:', argumentsList);

    return target.apply(thisArg, argumentsList).then(response => {
      console.log('HTTP 状态码:', response.status);
      
      if (response.status >= 400) {
        console.error('请求失败:', response.status);
      }

      return response;
    }).catch(error => {
      console.error('请求异常:', error);
      throw error;
    });
  }
});

方法 3:对象替换(适用于 request 是对象的方法)

js 复制代码
const originalRequest = api.request;

api.request = async function (...args) {
  console.log('拦截请求:', args);

  try {
    const response = await originalRequest.apply(this, args);
    console.log('HTTP 状态码:', response.status);
    return response;
  } catch (error) {
    console.error('请求错误:', error);
    throw error;
  }
};

🚀 总结

方法 适用场景 优势 适用难度
方法 1:函数劫持 request 是全局函数 简单易用,适合大多数情况
方法 2:Proxy 代理 request 可能有多个参数和上下文 灵活拦截,适用于更复杂场景 ⭐⭐
方法 3:对象方法替换 request 是对象方法(如 api.request() 适用于 SDK 或 api 对象封装 ⭐⭐
相关推荐
云枫晖13 分钟前
Webpack系列-Entry入口
前端·webpack
mustfeng18 分钟前
VCS & Verdi 2023安装
java·服务器·前端
Mintopia38 分钟前
🌐 数据合规框架下的 WebAIGC 训练数据处理技术规范
前端·javascript·aigc
骥龙1 小时前
2.6、Web漏洞挖掘实战(下):XSS、文件上传与逻辑漏洞深度解析
前端·xss
用户433845375691 小时前
Promise深度解析,以及简易版的手写实现
前端
梦之云1 小时前
state 状态相关
前端
梦之云1 小时前
effect 副作用相关
前端
golang学习记1 小时前
从0死磕全栈之Next.js 生产环境优化最佳实践
前端
Mintopia2 小时前
🧠 Next.js 还是 Nuxt.js?——当 JavaScript 碰上命运的分叉路
前端·后端·全栈
5pace2 小时前
Mac Nginx安装、启动、简单命令(苍穹外卖、黑马点评前端环境搭建)
java·前端·nginx·macos·tomcat