How can I read response.request.body in response?

[CharlieBrownCharacter]

Hey @mlegenhausen 👋 Great library and amazing work.

I'm trying to read the response.request.body in the response interception:

response: function (response) {
        response.text().then((value) => {
          console.log('Response here')
          console.log(value)
        })

        const requestClone = response.request.clone()
        requestClone.text().then((value) => {
          console.log('Request body here')
          console.log(value)
        })

        return response;
      },

I'm getting Uncaught (in promise) TypeError: Failed to execute 'clone' on 'Request': Request body is already used. I have tried with:

response.request.text().then((value) => {
          console.log('Request body here')
          console.log(value)
        })

But I'm getting TypeError: Failed to execute 'clone' on 'Request': Request body is already used.

My use case is to whenever there's a response I would like to log the request body and the response body. Is it possible to do it entirely in the response or do I have to keep track of the request, and whenever I get a response I look for the request and merge them?

[myeongjae-kim]

Hi, I've written a library for you: return-fetch. You can read request body from response interceptor. Here is a working example: https://stackblitz.com/edit/return-fetch-hq9is8

import returnFetch from 'return-fetch';

const fetchExtended = returnFetch({
  baseUrl: 'https://jsonplaceholder.typicode.com',
  headers: { Accept: 'application/json' },
  interceptors: {
    response: async (response, requestArgs) => {
      console.log('**** read request body from response interceptor ****');
      console.log(await new Response(requestArgs[1]?.body).text());
      return response;
    },
  },
});

fetchExtended('/posts', { method: 'POST', body: '{"hello":"world!"}' })

return-fetch is a minimalistic, simple and powerful library. It is a simple high order function to make fetch possible to use baseUrl, default headers and interceptors. It just takes 733Byte(minified + gzipped) which is slightly smaller than fetch-intercept(762Byte) but can do everything 'fetch-intercept' provide and also do more. You can easily implement your own feature using 'return-fetch'.