My RESTful service allows batching requests.

I'm trying to bine requests into one batch with help of Fetch API:

let req1 = {
        url: "/cups/count",
        options: {
           method: 'GET',
           headers: {
               'Content-Type': 'application/http'
           }
       }
    },

    req2 = {
        url: "/spoons/count",
        options: {
           method: 'GET',
           headers: {
               'Content-Type': 'application/http'
           }
        }
    },
    authToken = "Bearer my_token123",
    batchUrl = "",
    options = {
        method: 'POST',
        headers: {
            'Authorization': authToken,
            'Content-Type': 'multipart/mixed'
        },
        body: {req1, req2}
    };

    return fetch(batchUrl, options)
        .then(response => response.json())
        .then(items => dispatch(batchSuccess(items)))
        .catch((err) => {
            console.log(err)
        });

However it returns an error - bad request. I suppose I may bine HTTP requests in wrong way.

Is there simpler way of doing this?

Where in Network Chrome Dev Tools can I see nested HTTP requests?

My RESTful service allows batching requests.

I'm trying to bine requests into one batch with help of Fetch API:

let req1 = {
        url: "/cups/count",
        options: {
           method: 'GET',
           headers: {
               'Content-Type': 'application/http'
           }
       }
    },

    req2 = {
        url: "/spoons/count",
        options: {
           method: 'GET',
           headers: {
               'Content-Type': 'application/http'
           }
        }
    },
    authToken = "Bearer my_token123",
    batchUrl = "http://something./batch",
    options = {
        method: 'POST',
        headers: {
            'Authorization': authToken,
            'Content-Type': 'multipart/mixed'
        },
        body: {req1, req2}
    };

    return fetch(batchUrl, options)
        .then(response => response.json())
        .then(items => dispatch(batchSuccess(items)))
        .catch((err) => {
            console.log(err)
        });

However it returns an error - bad request. I suppose I may bine HTTP requests in wrong way.

Is there simpler way of doing this?

Where in Network Chrome Dev Tools can I see nested HTTP requests?

• javascript
• http
• google-chrome-devtools
• fetch-api

2 Answers 2

Your code does not work because it does not follow multipart/mixed request format:

1. In Content-Type header, there is no boundary information.
2. The child requests are not divided by boundary, instead they will be sent as plain text of req1 & req2 object.

In order to send valid multipart/mixed request, there is a node.js module batchelor. According to the introduction page, its usage is pretty simple.

If you want to send multipart/mixed request from browser, you can use build tool (gulp, webpack etc.) to pile batchelor into something like "batchelor-piled.js" and import it in HTML.

For developer tool, I didn't find anything in Chrome, but the child requests are visible in Firefox debug window's "Params" tab.

Here is an example of a batch request using the Fetch API with the Gmail Batch REST API.

This will get the content of several messages at once.

const response = await fetch("https://www.googleapis./batch/gmail/v1", {
  headers: {
    "Content-Type": "multipart/mixed; boundary=batch_boundary",
    Authorization: "Bearer <access_token>",
  },
  method: "POST",
  body: `--batch_boundary
Content-Type: application/http
Content-ID: 1

GET /gmail/v1/users/me/messages/{message-id-1}

--batch_boundary
Content-Type: application/http
Content-ID: 2

GET /gmail/v1/users/me/messages/{message-id-2}

--batch_boundary--`,
});

console.log(await response.text());