title: Returning new Error appears in then not catch function?
body: <p>I have a login function which returns an Error when a login attempt fails: </p>
  
  <pre><code>export const login = async () =&gt; {
    try {
      // Code to get res
  
      if (res.status === 200) {
        document.cookie = `userToken=${data.token}`;
      } else if (res.status === 400) {
        return new Error("Oh noo!!!");
      }
    } catch (err) {
      alert('err!! ', err);
    }
  };
  </code></pre>
  
  <p>The login form calls it with this: </p>
  
  <pre><code>submit = async event =&gt; {
      login()
        .then(res =&gt; {
          console.log('res ', res);
        })
        .catch(err =&gt; {
          console.log('err ', err);
        });
    };
  </code></pre>
  
  <p>When res.status is 400 and an Error is returned it appears in the <code>then</code> function not the <code>catch</code> function. How can I instead make it appear in the <code>catch</code> function? I assume this is best practice as the login attempt has failed.  </p>