title: POST not finishing before .then() runs in async call
body: <p>I'm making a POST request that takes ~10 seconds to finish... but my alert displays immediately on click, before the server returns 200. Why? And how do I fix it to wait until the server completes operation?</p>
  <pre><code>const handleClick = async () =&gt; {
      const response = await fetch(&quot;/create&quot;, {
          method: &quot;POST&quot;,
          headers: {
              &quot;Content-Type&quot;: &quot;application/json&quot;,
          },
          body: JSON.stringify(highlights),
      }).then(alert(&quot;hi!&quot;));
  };
  </code></pre>
  <p>If I change my .then to
  <code> .then(() =&gt; {alert(&quot;hi!&quot;);})</code> as was suggested below, the page flashes/seems to refresh when the server request is made <em>but the alert doesn't show at all</em></p>
  <p>Update:</p>
  <p>If I use this code:</p>
  <pre><code>const handleClick = async () =&gt; {
      try {
          const response = await fetch(&quot;/create&quot;, {
              method: &quot;POST&quot;,
              headers: {
                  &quot;Content-Type&quot;: &quot;application/json&quot;,
              },
              body: JSON.stringify(highlights),
          });
          alert(&quot;first&quot;);
      } catch (error) {}
      alert(&quot;second&quot;);
  };
  
  </code></pre>
  <p>The second alert fires right when the button is pressed, the first alert never fires.</p>