JavaScript Create and use request headers in fetch API

To create different request headers in JavaScript and use them with the Fetch API, you can utilize the Headers object or pass an object directly in the fetch options. Here’s how to do it:

Method 1: Using the Headers Object

You can create an instance of the Headers class and set your headers like this:

// Create a new Headers object
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", "Bearer your_token_here");
myHeaders.append("Custom-Header", "CustomValue");

// Use fetch API with headers
fetch("https://example.com/api/endpoint", {
    method: "GET", // or "POST", "PUT", etc.
    headers: myHeaders
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json(); // or response.text() or response.blob(), depending on your needs
})
.then(data => {
    console.log(data);
})
.catch(error => {
    console.error('There was a problem with the fetch operation:', error);
});

Method 2: Using an Object Directly

Alternatively, you can specify headers directly in an object when calling the fetch method:

// Use fetch API with headers as an object
fetch("https://example.com/api/endpoint", {
    method: "GET", // or "POST", "PUT", etc.
    headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer your_token_here",
        "Custom-Header": "CustomValue"
    }
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json(); // or response.text() or response.blob(), depending on your needs
})
.then(data => {
    console.log(data);
})
.catch(error => {
    console.error('There was a problem with the fetch operation:', error);
});

Notes:

1. Replace "https://example.com/api/endpoint" with the actual URL you are trying to fetch.
2. Modify the method to match the HTTP method you need (GET, POST, PUT, DELETE, etc.).
3. When sending a POST or PUT request with a body, you can include the body property in the options, typically as a JSON string:

fetch("https://example.com/api/endpoint", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer your_token_here"
    },
    body: JSON.stringify({ key: "value" }) // Replace with your actual payload
})

Conclusion

Using these methods, you can set custom headers for your requests made with the Fetch API in JavaScript, allowing you to control aspects like content type, authorization, and any other custom headers your API might require.