Fetch请求如何拦截后面的then

Q1：在报表导出中，使用了fetch，现在需要处理一个情况：接口会有返回404的状态。

  handleExport = () =>{
    if( this.state.type === ''){
        message.warning('请先选择区域');
    }else{
        getToken().then(token=>{
            const url = `${Url()}shopping_mall/reports/rank/export?from_date=${getStartDate(this.state.stDate)}&to_date=${getEndDate(this.state.endDate)}&order_by=${this.state.orderBy}&${this.state.type}`;
            const fetchOption = {
              method: 'GET',
              headers: {
                'X-Requested-With': '1000',
                Authorization: `Bearer ${token}`,
              },
            };
            // 开始所需数据的下载
            fetch(url, fetchOption)
              .then(response => response.blob())
              .then(blob=>{
                const aUrl = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = aUrl;
                document.body.appendChild(a);
                a.download= "排行数据详细表.csv";
                a.click();
                setTimeout(()=>{
                  document.body.removeChild(a);
                  window.URL.revokeObjectURL(aUrl);
                },2000);
              })
          })
    }
  }

修改后

  handleExport = () =>{
    if( this.state.type === ''){
        message.warning('请先选择区域');
    }else{
        getToken().then(token=>{
            const url = `${Url()}shopping_mall/reports/rank/export?from_date=${getStartDate(this.state.stDate)}&to_date=${getEndDate(this.state.endDate)}&order_by=${this.state.orderBy}&${this.state.type}`;
            const fetchOption = {
              method: 'GET',
              headers: {
                'X-Requested-With': '1000',
                Authorization: `Bearer ${token}`,
              },
            };
            return new Promise((resolve, reject) => {
              // 开始所需数据的下载
              fetch(url, fetchOption)
                .then(response => {
                  // console.log('response = ', response);
                  if(response.ok){
                    return response.blob();
                  }else{
                    message.warning('暂无数据导出');
                    throw `${response.statusText}`;
                    // throw new Error("error");
                    // message.error('')
                  }
                })
              .then(blob=>{
                const aUrl = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = aUrl;
                document.body.appendChild(a);
                a.download= "排行数据详细表.csv";
                a.click();
                setTimeout(()=>{
                  document.body.removeChild(a);
                  window.URL.revokeObjectURL(aUrl);
                },2000);
              })
              .catch(err => {
                reject(err);
              });
            });

          })
    }
  }

其中有个eslint提示语法报错：

expected an object to be thrown. (no-throw-literal)

因为语法要求写成这种：throw new Error(${response.statusText});，（语法规范：https://cn.eslint.org/docs/rules/no-throw-literal），于是这样改了，但是页面导出时，一旦是404的状态，就会跳转到报错页面，用户体验不友好，目前不知如何解决。先Mark

于是还是写成语法报错形式：throw${response.statusText};，这样不会跳转到报错界面。

参考来源：http://react-china.org/t/fetch-then/7054