接口错误码监听方法

背景

接口请求方法使用是的内部封装的，没办法直接像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` 对象封装	⭐⭐