React - fetch-intercept 修改所有标题答案

【问题标题】：React - fetch-intercept modify all headersReact - fetch-intercept 修改所有标题
【发布时间】：2018-06-20 02:09:20
【问题描述】：

使用react with fetch-intercept拦截所有请求并添加标头的正确方法是什么？我有一个配置文件，其中包含对 fetchIntercept.register() 的调用。我有用于导入 fetchIntercept 配置文件的组件 api 调用的单独文件。我在调用 api 后添加了 unregister() 调用，但没有添加标头。

api/config.js

import fetchIntercept from 'fetch-intercept';

const unregister = fetchIntercept.register({
    request: function (url, config) {
        // Modify the url or config here
        const withDefaults = Object.assign({}, config);
        withDefaults.headers = defaults.headers || new Headers({
          'AUTHORIZATION': `Bearer ${JSON.parse(sessionStorage.credentials).authToken}`
        });
        return [url, withDefaults];
    },

    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);
    }
});

export default unregister;

api/packageApi.js

import unregister from '../api/config';

class PackageApi {

  static getAllPackages() {
    const request = new Request('/get/my/packages', {
      method: 'GET'
    });
    return fetch(request).then(response => {
      return response.json();
    }).catch(error => {
      return error;
    });
  }

}
unregister();

export default PackageApi;

【问题讨论】：

这里有一个解决方案stackoverflow.com/questions/42578452/…

标签： reactjs fetch-api

【解决方案1】：

使用 axios 而不是 fetch 非常简单。

【讨论】：

在尝试使用 service worker 进行 PWA 时使用 axios 将无用

【解决方案2】：

unregister 的使用似乎不正确。在拨打任何电话之前，您已取消注册。

【讨论】：

【解决方案3】：

我在单独的文件中添加了 fetch-intercept 的工作示例，它非常适合我。

https://stackblitz.com/edit/react-fetch-intercept-bi55pf?file=src/App.js

App.js

import React from 'react';
import './style.css';
import { AuthInterceptor } from './AuthInterceptor';

export default class App extends React.Component {
  componentDidMount() {
    AuthInterceptor();
    fetch('http://google.com', {
      headers: {
        'Content-type': 'application/json',
      },
    });
  }
  render() {
    return (
      <div>
        <h1>Hello StackBlitz!</h1>
        <p>Start editing to see some magic happen :)</p>
      </div>
    );
  }
}

AuthInterceptor.js

import fetchIntercept from 'fetch-intercept';

export const AuthInterceptor = () => {
  fetchIntercept.register({
    request: function (url, config) {
      // Modify the url or config here
      config.headers.name = 'Aravindh';
      console.log(config);
      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);
    },
  });
};

您可以在控制台中看到更新后的标头值。

谢谢

【讨论】：