title: How to handle bad request in fetch()
body: <p>I know this is a basic and often recurring issue, but I am still unable to make it work.</p>
  <p>I have the following code</p>
  <pre><code>handleAdd = (event: any): void =&gt; {
          
      // ...
          
      // create new task
      try {
            // send data to backend
            fetch(`/api/tasks?name=${name}&amp;priority=${priority}`, { method: 'post' })
                  .then(response =&gt; { if (!response.ok) {  
                         throw new Error('error =&gt; how to get bad request message here?') } })
      }
      // handle exception
      catch (e) {
            console.log(e);
            this.setState({
                 isError: true,
                 errorMessage: e.message
            });
      }
  }
  </code></pre>
  <p>the API returns 400 with some error message</p>
  <p><a href="https://i.stack.imgur.com/7Mh5H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Mh5H.png" alt="enter image description here" /></a></p>
  <p>but in the browser I get</p>
  <p><a href="https://i.stack.imgur.com/IzKac.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IzKac.png" alt="enter image description here" /></a></p>
  <p>So I have two questions</p>
  <ul>
  <li>Why the <code>throw new Error()</code> in fetch does not goes to <code>catch(e) {}</code> method (if the error is outside fetch function, it works well)? How to rewrite this line to get into catch method? I think it has something to do with the Promise object?</li>
  <li>How to get the bad request message from response object?</li>
  </ul>
  <p>update, working solution</p>
  <hr />
  <pre><code>fetch(`/api/tasks?name=${name}&amp;priority=${priority}`, { method: 'post' })
      .then(response =&gt; {
          if (!response.ok) {
                    
              response.text().then(function (text) {
                  throw Error(text);
              }).catch((e) =&gt; {
                  this.setError(e.message);
              });
  
          }
      })
  </code></pre>
  <ul>
  <li>how to get response.text() into the Error exception?</li>
  </ul>