title: fetch `then()` is executing even if api fails
body: <p>Hi I have made a wrapper for fetch something like this, I'm importing this wrapper in components but on failure <code>catch()</code> of this wrapper is executing but in the component <code>then()</code> function is executing any idea!!</p>
  
  <pre><code> import { SERVER_URL } from '../configs/serverConfig';
  
    export default function callApi(api_url: string, method = 'get', data = null) {
  
  
      opts = {
        method: method,
        headers: {
          Authorization: 'Basic VFM0NjA2Omsuc3ZpbTg4',
          Accept: 'application/json',
          'Content-Type': 'application/json'
        }
      };
      if (data) {
        opts.data = JSON.stringify(data);
      }
      return fetchWrapper(api_url, opts);
    }
  
  
  
    function fetchWrapper (api_url: string, opts: any){
      let requestParamObj= {};
      if(opts.method.toLocaleLowerCase() === 'get'){
        requestParamObj = {
          method:opts.method
        }
      }
      else if(opts.method.toLocaleLowerCase() === 'post'){
        requestParamObj = {
          method: opts.method,
          headers: opts.headers,
          body: opts.data
        }
      }
  
  
      return (
        fetch(api_url, requestParamObj)
          .then((resp) =&gt; resp.json())
          .then(response =&gt; {
            return response;
          })
          .catch(error =&gt; {
            console.log('request failed', error);
            return error;
          })
      )
    }
  </code></pre>
  
  <p>I'm calling this in a component something like this</p>
  
  <pre><code>    callApi('/someURl', 'GET')
          .then((res) =&gt; {
          console.log('this get called even if api fails', res)
      }).catch((err) =&gt; {
          //TODO :: error handling at global level
          console.log('Some err', err)
      })
      }
  </code></pre>