title: Understanding promise.race() usage
body: <p>As far as I know, there are two options about <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" rel="noreferrer"><strong><code>promise</code></strong></a>: </p>
  
  <ul>
  <li><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all" rel="noreferrer"><code>promise.all()</code></a></p></li>
  <li><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race" rel="noreferrer"><code>promise.race()</code></a></p></li>
  </ul>
  
  <p>Ok, I know what <code>promise.all()</code> does. It runs promises in parallel, and <code>.then</code> gives you the values if both resolved successfully. Here is an example:</p>
  
  <pre><code>Promise.all([
    $.ajax({ url: 'test1.php' }),
    $.ajax({ url: 'test2.php' })
  ])
  .then(([res1, res2]) =&gt; {
    // Both requests resolved
  })
  .catch(error =&gt; {
    // Something went wrong
  });
  </code></pre>
  
  <p>But I don't understand what does <code>promise.race()</code> is supposed to do exactly? In other word, what's the difference with not using it? Assume this:</p>
  
  <pre><code>$.ajax({
      url: 'test1.php',
      async: true,
      success: function (data) {
          // This request resolved
      }
  });
  
  $.ajax({
      url: 'test2.php',
      async: true,
      success: function (data) {
          // This request resolved
      }
  });
  </code></pre>
  
  <p>See? I haven't used <code>promise.race()</code> and it behaves like <code>promise.race()</code>. Anyway, is there any simple and clean example to show me when exactly should I use <code>promise.race()</code> ?</p>