js如何监听所有请求

在JavaScript开发中，监听所有请求是一项强大的技能，它能帮助开发者更好地掌控应用程序与服务器之间的数据交互，进行诸如性能监测、错误处理、数据拦截等操作。那么，js如何监听所有请求呢？

可以利用浏览器提供的Fetch API。Fetch API 提供了一个基于Promise的接口，用于获取资源。我们可以通过重写fetch方法来实现监听。例如：

const originalFetch = window.fetch;
window.fetch = function () {
    console.log('发起了一个新的请求');
    return originalFetch.apply(this, arguments);
};

上述代码中，我们先保存了原始的fetch方法，然后重新定义fetch。在新定义的fetch中，打印出请求发起的信息，再调用原始的fetch方法，这样就实现了对所有通过fetch发起请求的监听。

除了Fetch API，对于使用XMLHttpRequest（XHR）发起的请求，我们也有办法监听。XHR 是一种较老但仍然广泛使用的技术。我们可以通过创建一个自定义的XHR包装器来实现监听：

function myXHR() {
    const xhr = new XMLHttpRequest();
    const open = xhr.open;
    xhr.open = function () {
        console.log('XHR请求即将发起');
        open.apply(this, arguments);
    };
    return xhr;
}

在实际使用中，使用myXHR代替原生的XMLHttpRequest，就能监听所有XHR请求。

如果项目中使用了Axios库来发起HTTP请求，Axios提供了拦截器机制来实现请求监听。

import axios from 'axios';

axios.interceptors.request.use(config => {
    console.log('Axios请求即将发送', config);
    return config;
}, error => {
    console.error('Axios请求错误', error);
    return Promise.reject(error);
});

通过上述代码，我们在Axios请求发送前进行了拦截，打印出请求的相关信息，并且可以对错误情况进行处理。

在JavaScript中监听所有请求的方法有多种，具体选择哪种方法取决于项目所使用的技术栈。掌握这些方法，能让开发者在开发过程中更好地监控和优化应用程序的网络请求。