Why is .then not working after fetching info from a form?-CodePudding

My javascript function (submitEmail) should get the user's input and post it to /emails, convert the inputs to json and then log it into the console. I have console.log after each step and it does not get past fetching the inputs, so it tells me that that step was done but then I get the error: Uncaught and I don't know how to fix it.

This means that the .then in my function is not working and I don't know why. I am new to javascript so I'm not fully sure of how it works.

How do I fix this?

js:

document.addEventListener('DOMContentLoaded', function () {
  ...
  // Submit form
  document.querySelector('#compose-form').onsubmit = submitEmail;
});

function submitEmail() {

  console.log('sent') // this is shown on the console

  fetch('/emails', {
    method: 'POST',
    body: JSON.stringify({
      recipients: document.querySelectorAll('#compose-recipients'), // this gets all the recipients
      subject: document.querySelector('#compose-subject'), // this gets the subject 
      body: document.querySelector('#compose-body') // gets the body 
    })

  })

  console.log('fetched') // this is shown on the console

    .then(response => response.json()) // this is where the error occurs

  console.log('converted') // this isn't shown on the console

    .then(result => {
      // Print result
      console.log(result);

    });

  console.log('results shown') // not shown

    .catch(error => {
      console.log('Error:', error);
    });

  load_mailbox('sent')

  console.log('sent') // not shown

  return false
};

html:

<form id="compose-form">
    <div >
        From: <input disabled  value="{{ request.user.email }}">
    </div>
    <div >
        To: <input id="compose-recipients" >
    </div>
    <div >
        <input  id="compose-subject" placeholder="Subject">
    </div>
    <textarea  id="compose-body" placeholder="Body"></textarea>
    <input type="submit"  id="submit-new" name="btnSubmit" />
</form>

CodePudding user response：

it seems like the .then() methods actually tries to run on console.log() and because console.log() does not return a promise, you get an error

console.log('fetched').then(response => response.json())

you could do the log inside of the .then() callback instead, like this

fetch('https://example.com').then((response) => {
console.log('fetched);
return response.json();
})

CodePudding user response：

You cannot put a console.log in between your promise and the then method.

fetch returns a promise

fetch('your endpoint') // this returns a promise
.then(yourCallBack) // this calls the then method of the promise

but your code

fetch('your endpoint') // this returns a promise
console.log('your message') // this returns undefined
.then(yourCallBack) // there is no then method on undefined

The promise is not assigned to anything and console.log returns undefined. undefined does not have a then method.