title: Throw an error to a catch handler and ignore then functions?
body: <p>I have a helper function:</p>
  
  <pre><code>function httpRequestHelper(body) {
      return fetch(`${host}:${port}`, {
          method: 'post',
          body: JSON.stringify(body)
      })
      .then(function (response) {
          if (!response.ok) {
              throw Error(response.statusText);
          }
          return response.json();
      })
      .then(function(response) {
          if (response.type === 'error') {
              throw Error(response);
          }
          return response;
      })
      .catch(function(error) {
          return error;
      });    
  }
  </code></pre>
  
  <p>that I wrote to keep functions for various commands short. These functions just specify the body to be sent and what part of the response is relevant to the consumer:</p>
  
  <pre><code>function hasActiveProject() {
      return httpRequestHelper({ type: 'request', cmd: 'has_active_project' })
      .then(function (response) {
          return response.payload.value;
      })
  }
  </code></pre>
  
  <p>I execute the various commands like this:</p>
  
  <pre><code>try {
      let hasActiveProjectResponse = await otii.hasActiveProject()
      console.log(hasActiveProjectResponse);    
  } catch (error) {
      console.log(error);
  }
  </code></pre>
  
  <p>Now the problem is that in the catch function I would expect to get the error message thrown, but instead I get error messages like:</p>
  
  <pre><code>TypeError: Cannot read property 'value' of undefined
  </code></pre>
  
  <p>This is because <code>hasActiveProject()</code> tries to extract the relevant response even when there was an error and that causes a different error that is returned to my catch (error) handler.</p>
  
  <p>How can I rewrite this so that</p>
  
  <ul>
  <li><code>hasActiveProject()</code> remains thin</li>
  <li>The catch handler receives the original error</li>
  </ul>