javascript实现fetch请求返回的统一拦截

JavaScript中的fetch API是一种现代的异步数据获取方式，它提供了更简洁、更符合Promise特性的接口来处理HTTP请求。然而，fetch默认并不提供请求和响应的拦截器，这对于需要进行全局处理，比如鉴权、错误处理等场景并不方便。本篇文章主要探讨如何使用JavaScript实现fetch请求返回的统一拦截。 我们需要理解拦截器的目的。拦截器主要用于在请求发送前或响应接收后执行一些通用操作，例如添加身份验证令牌、处理网络错误等。在axios库中，内置的拦截器API使得这些功能变得简单。但在fetch API中，由于没有内建的拦截器机制，我们需要通过其他方式来实现类似的功能。 在fetch API没有内置拦截器的情况下，一种常见的做法是创建一个统一的请求函数，所有网络请求都通过这个函数进行。例如，在antd-pro项目中，可能会有一个封装好的fetch函数，负责处理如添加token、错误处理等操作。然而，这样的实现需要在每个请求的地方都显式调用这个函数，不够便捷。 为了实现类似于axios的拦截器功能，我们可以利用JavaScript的`Object.defineProperty`。`defineProperty`允许我们修改对象属性的行为，包括在访问或修改属性时执行自定义逻辑。在这个场景下，我们可以将全局的fetch属性替换为一个getter函数，每次访问fetch时，实际上是在调用我们定义的逻辑，从而实现拦截。 以下是一个简单的示例，展示了如何使用`defineProperty`来实现fetch请求的拦截： ```javascript const originFetch = fetch; Object.defineProperty(window, "fetch", { configurable: true, enumerable: true, get() { return (url, options) => { // 在这里添加请求拦截，例如添加headers中的token const newOptions = { ...options, headers: { 'Content-Type': 'application/json;charset=UTF-8', Accept: 'application/json', token: localStorage.getItem('token'), }, ...options.headers, }; // 检查并处理响应状态，实现返回拦截 return originFetch(url, newOptions) .then(checkStatus) .then(response => response.json()); }; }, }); ``` 在这个示例中，我们在请求时自动添加了'Content-Type'和'Accept'头，并从localStorage获取token添加到headers中，实现了请求拦截。同时，我们使用`checkStatus`函数来检查响应状态，根据需要处理错误，实现了返回拦截。 除了`defineProperty`，还可以使用JavaScript的`Proxy`对象来创建拦截器。`Proxy`能拦截对象的各种操作，包括访问、赋值、方法调用等，适用于更复杂的场景。对于微信小程序中的`wx.request`，同样的思路可以实现拦截。 虽然fetch API本身不内置拦截器，但通过巧妙地利用JavaScript语言特性，我们可以自行构建拦截机制，达到类似的效果。这不仅提高了代码的可维护性，还使得全局的请求处理变得简单易行。理解并熟练运用这些技术，对于提升JavaScript编程能力以及解决实际问题非常有帮助。