68

In Javascript, when is this error thrown?

enter image description here

index.js

/**
 * Created by tushar.mathur on 24/12/15.
 */
'use strict'

const _ = require('lodash')
const Rx = require('rx')
const createDataStore = require('./src/createDataStore')

const fetch = x => Rx.Observable.fromPromise(window.fetch(x)) 
const parseJSON = x => Rx.Observable.fromPromise(x.json()) // Line: 11 (Where the exception is thrown)
var create = _.partial(createDataStore, fetch, parseJSON)
module.exports = {
  create,
  // Alias for legacy purposes
  createDataStore: create,
  createFetchStore: create
}

Is it a native promise error? What does it imply? Google shows no result found.

3 Answers 3

108

I think it means that the body has already been read by using either .json() .text() etc... When you run x.json() it takes the response's body and reads it into JSON. If you try to run x.json() again it will give you that error. So you could only use one of these methods once. So I am assuming somewhere in your code it is reading the body of the same response again using one of the Body methods.

I think that is why they offer the Body.bodyUsed method. So you can see if it has been read already.

1
16

This error means you have resolved the promise (in this case, you use Body.json()) more than once.

You can check the response body methods from the ref I attached below and you need a flag to check if the promise has been resolved or not: in this case, you can use Body.bodyUsed

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Response

HTH

1
  • 2
    I've just run into this error too. You don't need to resolve the promise twice, which should be impossible anyway without fiddling with internal properties of the promise. You only have to call .then() on it twice. It's documented that calling .then() twice is supported. I'll see if I can boil down a minimal example. My code displaying this is here: tonicdev.com/hippietrail/57611741f056621300ecd1e2 Jun 15, 2016 at 13:06
0

The similar issue happens when using next js calling api from client side to next js server especially the usage of form data. For those who are looking for how to handle form data in next.js (v>=13), here's how I did:

  1. Client
    let formData = new FormData();
    formData.append("file", file, file.name);
    const response = await fetch(`/api/{nextjs_server}`, {
      method: "POST",
      headers: {
        Authorization: `${token if needed}`,
      },
      body: formData,
      redirect: 'follow'
    });
  1. Server (Next.js)
export const POST = async (req, res) => {
const formDataFlag = await req.formData() // this is the formData from the client
  if (formDataFlag) {
    const file = formDataFlag.get('file');
    
    const formDataToSend = new FormData();
    formDataToSend.append('file', file, file.name);

    const response = await fetch(`${actual api url}`, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${token if needed}`,
      },
      body: formDataToSend,
      redirect: 'follow'
    })
    const textResponse = await response.text();
    return new Response(textResponse, { status: 200 });
  }
}

The key is to redefine formData (in my case it's formDataToSend). Happy coding!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.