实现接口错误码监听的有效方法

我们常常会遇到接口请求相关的问题，就像这次，我们使用的接口请求方法是内部封装的，没办法像使用axios那样，直接对响应结果进行拦截处理。但在实际项目里，我们又希望请求方式保持统一，同时还能对错误信息进行处理，比如弹出错误提示框。经过一番探索，发现可以借助Proxy代理来实现对接口错误码的监听，下面就详细给大家介绍几种可行的方法。

一、利用Proxy代理进行拦截

在无法直接对内部封装的接口请求方法进行响应拦截时，Proxy代理成了一个不错的选择。具体实现代码如下：

// 拷贝一份原始的请求方法，后续代理操作基于此
const originalRequest = request; 
// 通过Proxy创建代理，实现对请求的拦截
request = new Proxy(originalRequest, {
  apply(target, thisArg, argumentsList) {
    return target.apply(thisArg, argumentsList).then(response => {
      // 在这个位置，可以针对响应结果进行处理，比如检查特定的接口错误码
      return response;
    }).catch(error => {
      // 这里专门用于处理请求过程中出现的错误
      throw error;
    });
  }
});

通过上述代码，我们借助Proxy的apply方法，在请求执行的过程中插入了自定义的逻辑，从而实现对请求和响应的控制。

二、GPT推荐的几种方案

除了上述直接使用Proxy代理的方法，GPT还推荐了另外几种不错的方案，下面分别给大家介绍。

（一）方法1：函数劫持

// 先备份原始的request方法，防止后续丢失
const originalRequest = request;

// 重新定义request函数，实现对请求的劫持
request = async function (...args) {
  try {
    // 执行原始的请求方法，并等待响应结果
    const response = await originalRequest(...args);
    // 打印HTTP状态码，方便查看请求状态
    console.log('HTTP状态码:', response.status);

    // 根据状态码判断请求是否失败，400及以上表示请求可能存在问题
    if (response.status >= 400) {
      console.error('请求失败:', response.status);
    }

    return response;
  } catch (error) {
    // 如果请求过程中出现异常，打印错误信息
    console.error('请求异常:', error);
    // 抛出错误，让调用者可以捕获并处理
    throw error;
  }
};

这种方法的原理是通过重新定义request函数，在函数内部调用原始的request方法，并在请求前后添加自定义的逻辑。它的优点是简单直接，容易理解和实现，比较适合request是全局函数的场景。

（二）方法2：使用Proxy代理request方法

const originalRequest = request;

request = new Proxy(originalRequest, {
  apply(target, thisArg, argumentsList) {
    // 在请求执行前，打印请求参数，便于调试和分析
    console.log('请求参数:', argumentsList);

    return target.apply(thisArg, argumentsList).then(response => {
      // 打印响应的HTTP状态码
      console.log('HTTP状态码:', response.status);
      
      // 检查状态码，若大于等于400，说明请求失败，打印错误信息
      if (response.status >= 400) {
        console.error('请求失败:', response.status);
      }

      return response;
    }).catch(error => {
      // 捕获请求过程中的异常，打印错误信息
      console.error('请求异常:', error);
      // 抛出错误，确保上层调用可以感知到
      throw error;
    });
  }
});

该方法同样借助Proxy代理，不过相比前面直接使用Proxy的方式，这里在请求前打印了请求参数，能让我们更清楚请求的具体内容。这种方式适用于request可能有多个参数和复杂上下文的场景，灵活性更高。

（三）方法3：对象替换（适用于request是对象的方法）

// 保存原始的对象方法
const originalRequest = api.request;

// 替换对象的request方法
api.request = async function (...args) {
  // 打印拦截到的请求参数
  console.log('拦截请求:', args);

  try {
    // 调用原始的request方法，并等待响应
    const response = await originalRequest.apply(this, args);
    // 打印响应的HTTP状态码
    console.log('HTTP状态码:', response.status);
    return response;
  } catch (error) {
    // 捕获请求过程中的错误，打印错误信息
    console.error('请求错误:', error);
    // 抛出错误，让调用者处理
    throw error;
  }
};

当request是某个对象（如api对象）的方法时，这种对象替换的方式就很适用。通过替换对象的request方法，在内部实现自定义的逻辑，比如打印请求参数、检查状态码等。它在处理SDK或api对象封装的场景中表现出色。

三、方法总结与对比

为了让大家更清晰地了解这几种方法的差异，下面通过表格进行总结：

通过以上几种方法，我们可以有效地实现对接口错误码的监听，根据不同的场景选择合适的方法，能够让我们在项目开发中更好地处理接口请求的错误情况，希望这些内容对大家有所帮助。

喜欢 (0)赏

【请潘老师喝杯Coffee吧！】

分享 (0)