当我们获取时触发了哪个事件

Question

我需要在 UI 上生成的所有 XHR 请求中添加一个标头。在整个页面上，我正在使用 fetch api。我需要在 fetch 开始之前添加标头，因此问题是，有什么方法可以在 fetch 发生之前更改请求？

我知道 Fetch 事件，但这仅适用于服务工作者，而不适用于实际的 HTML 页面。

Answer 1

你需要一个拦截器。您可以使用：

https://github.com/werk85/fetch-intercept

然后：

import fetchIntercept from 'fetch-intercept';

const unregister = fetchIntercept.register({
    request: function (url, config) {
        // Modify headers here
        return [url, config];
    },

    requestError: function (error) {
        // Called when an error occured during another 'request' interceptor call
        return Promise.reject(error);
    },

    response: function (response) {
        // Modify the reponse object
        return response;
    },

    responseError: function (error) {
        // Handle an fetch error
        return Promise.reject(error);
    }
});

// Call fetch to see your interceptors in action.
fetch('http://google.com');

// Unregister your interceptor
unregister();