title: promise from fetch not resolving properly
body: <p>So I have this method that I use to call the all purpose fetch method I defined in a separate js file:</p>
  
  <pre><code>export function detailedView(request,token)
  {
      let endpoint = 'api/v1/cbn/inventory/GetDetailRequest?RequestNo='+request['RequestNo'];
  
      let header = {
          "Content-Type": "application/x-www-form-urlencoded",
          "Authorization": "Bearer "+ token
      }
  
      return dispatch =&gt; {
          return fetchAPI(endpoint,'POST', header, null)
          .then((json) =&gt; {
              dispatch(receiveDetails()); 
          })
          .catch((error) =&gt; {     //PROBLEM IS HERE
              console.log("error message: " + error);
              dispatch(receiveEmptyDetails());
          });
      }
  }
  </code></pre>
  
  <p>the marked spot in that code is always called for some reason although the fecth function below always end up at the spot marked below:</p>
  
  <pre><code>export function fetchAPI(endpoint, method, header, data) {
      let url = 'http://10.64.2.149:8082/' + endpoint;
  
      let options = {
              method: method,
              headers: header,
              body: stringify(data)
            };
  
      return fetch(url, options)
          .then(response =&gt; {
              return response.json()
                  .then((json) =&gt; {
                      console.log(json, response) //AT THIS POINT RESPONSE STATUS IS 200, SHOWN IN THE SCREENCAP BELOW
                      if (response.status === 200 || response.status === 201) {
                          return json; 
                      } else if (response.status === 408) {
                          throw('Request Timeout');
                        }
                      else if (response.status === 400){
                            throw ('Bad request');
                      }
                       else {
                          if (json.errors) {
                              throw(json.errors);
                          } else {
                              throw('unknown error');
                          }
                      }
                  })
          })
          .catch(error =&gt; {
              if (typeof error.message !== 'undefined') {
                  throw(error.message);
              } else if (typeof error === 'string') {
                  throw(error);
              } else if (Object.keys(error)) {
                  let errStr = '';
                  let errors = _.omit(error, ['column', 'line', 'sourceURL'])
  
                  _.forEach(errors, function (value) {
                      errStr += value + '.\n';
                  });
                  throw (errStr);
              } else {
                  throw('unknown error');
              }
          });
  }
  
  module.exports = { fetchAPI };
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/M8Tjz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M8Tjz.png" alt="CONSOLE OUTPUT"></a></p>
  
  <p>I have another method that does exactly the same as this (just with different endpoint, but everything else is a copy and paste), which utilizes the same fetch function above, and the problem never appeared. </p>
  
  <p>But as you can see from the printed console log (last line), for some reason this bit always resolves to <code>catch</code> instead of <code>then</code>, calling it a <code>reference error</code> as if the request wasn't successful.</p>
  
  <p>Anyone has any idea what's happening here?</p>