接口错误码监听方法

背景

接口请求方法使用是的内部封装的,没办法直接像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 对象封装 ⭐⭐
相关推荐
程序视点3 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian3 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
嘉琪0013 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴3 小时前
Smoothstep
前端·webgl
若梦plus4 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员4 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉4 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
若梦plus4 小时前
Webpack中微内核&插件化思想的应用
前端·webpack
若梦plus4 小时前
微内核&插件化设计思想
前端
柯北(jvxiao)4 小时前
搞前端还有出路吗?如果有,在哪里?
前端·程序人生