React.js服务请求中请求头的定义方法新手问询

Hey there! Since you're transitioning from Angular to React and already know how to add headers in Angular, let's walk through the different ways to do the same with fetch in React—they're actually pretty intuitive once you see them in action.

Let's start with your existing component code and adapt it step by step, using simulated header data like X-App-ID, Authorization, and Content-Type as examples.

Method 1: Directly Pass Headers in the Fetch Config #

The simplest way is to add a second argument to fetch() that contains your headers in a headers property. You can use a plain object or a Headers instance (both work fine).

Here's how to modify your componentDidMount:

componentDidMount(){ 
  // Define your simulated headers
  const requestHeaders = {
    'X-App-ID': 'my-react-app-123',
    'Authorization': 'Bearer fake-token-456',
    'Content-Type': 'application/json'
  };

  fetch('serviceURL', {
    method: 'GET', // Default is GET, but you can specify POST/PUT etc.
    headers: requestHeaders
  }) 
    .then(res=>res.json()) 
    .then(items=>{ 
      this.setState({ items : items.contactNumber }); 
    })
    .catch(err => console.error('Request error:', err)); // Don't forget error handling!
}

For POST requests, just update the method to 'POST' and add a stringified JSON body:

componentDidMount(){ 
  const requestHeaders = {
    'X-App-ID': 'my-react-app-123',
    'Authorization': 'Bearer fake-token-456',
    'Content-Type': 'application/json'
  };

  const postData = {
    name: 'John Doe',
    email: 'john@example.com'
  };

  fetch('serviceURL', {
    method: 'POST',
    headers: requestHeaders,
    body: JSON.stringify(postData)
  }) 
    .then(res=>res.json()) 
    .then(response=>{ 
      console.log('Post success:', response);
    })
    .catch(err => console.error('Post error:', err));
}

Method 2: Create a Reusable Headers Object #

If you need the same headers across multiple components or requests, extract them into a reusable variable or utility function to keep your code DRY (Don't Repeat Yourself).

Example:

// At the top of your component or in a separate utils file
const getDefaultHeaders = () => ({
  'X-App-ID': 'my-react-app-123',
  'Authorization': `Bearer ${localStorage.getItem('authToken')}`, // Pull token from storage
  'Content-Type': 'application/json'
});

// Then in your component:
componentDidMount(){ 
  fetch('serviceURL', {
    headers: getDefaultHeaders()
  }) 
    .then(res=>res.json()) 
    .then(items=>{ 
      this.setState({ items : items.contactNumber }); 
    })
    .catch(err => console.error('Request error:', err));
}

Method 3: Build a Custom Fetch Wrapper #

For larger apps, creating a custom fetch wrapper is even better—it centralizes header logic, error handling, and any other common request behavior.

Example:

// utils/customFetch.js
export const customFetch = (url, options = {}) => {
  const defaultHeaders = {
    'X-App-ID': 'my-react-app-123',
    'Authorization': `Bearer ${localStorage.getItem('authToken')}`,
    'Content-Type': 'application/json'
  };

  // Merge default headers with any custom headers passed in
  const mergedHeaders = { ...defaultHeaders, ...options.headers };

  return fetch(url, {
    ...options,
    headers: mergedHeaders
  })
  .then(res => {
    if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
    return res.json();
  });
};

// In your component:
import { customFetch } from './utils/customFetch';

componentDidMount(){ 
  customFetch('serviceURL')
    .then(items=>{ 
      this.setState({ items : items.contactNumber }); 
    })
    .catch(err => console.error('Request error:', err));

  // For POST requests:
  customFetch('serviceURL', {
    method: 'POST',
    body: JSON.stringify({ name: 'Jane Doe' })
  })
  .then(response => console.log('Post success:', response))
  .catch(err => console.error('Post error:', err));
}

A quick note: When using fetch, remember that GET requests can't have a body, so you only need headers there. For POST/PUT, make sure your Content-Type matches the data you're sending (e.g., multipart/form-data for file uploads instead of application/json).

Hope this helps you get up and running with headers in React's fetch calls! 😊

内容的提问来源于stack exchange，提问作者user9256397