关于appConfig中request属性如何处理onError跳转到指定页面

[raohuiyong]

实现效果，在接口请求异常的情况下，统一处理异常并跳转到error页面

request: {
    baseURL: '',
    timeout: 5000,
    interceptors: {
      request: {
        onConfig: config => {
          return config;
        },
        onError: error => {
          logger.error(error);
       // 此处统一跳转到404页面
          return Promise.reject(error);
        }
      },
      response: {
        onConfig: config => {
          return config;
        },
        onError: error => {
          logger.error(error?.response);
        // 此处统一跳转到500页面
          return Promise.reject(error);
        }
      }
    }
  }

[大果]

可以先按下面的方式：

import { createApp } from 'ice';
+import { createHashHistory } from 'history';

+const history = createHashHistory();

const appConfig = {
  app: {
    rootId: 'ice-container',
  },
  request: {
    interceptors: {
      response: {
        onError: error => {
+          history.push('/home');
          return Promise.reject(error);
        }
      }
    }
  }
};

createApp(appConfig);

更好的方案：能直接使用应用的 history 实例，这个需要看下~

[raohuiyong]

@imsobear 试了下，无法实现效果。当接口请求错误后，hash发生了变化，但是路由视图并未更新

[大果]

多试一下，我本地试了是 OK 的，如果还是搞不定的话，GitHub 上放个重现仓库，我看下

[raohuiyong]

@imsobear 演示地址，home页面会有一个3秒的延迟，然后mock接口会返回一个500，最后跳转到about页面。实际效果是地址栏hash发生了改变，但是页面内容没有改变。而且设置的fallback是无效的，路由切换过程中始终显示“loading”，并不是我设置的“加载中...”

[大果]

嗯，我大概了解了，应该是因为不是一个 history 实例的问题，这个功能我们下周的版本支持下。

[大果]

fallback 的问题在另一个 issue 里说

[大果]

这个问题核心是要把 history 实例暴露给用户，然后内部要从 BrowserRouter 这种换成自定义 history 实例的方式。

import { createApp, history } from 'ice';

const appConfig = {
  app: {
    rootId: 'ice-container',
  },
  request: {
    interceptors: {
      response: {
        onError: error => {
          history.push('/home');
          return Promise.reject(error);
        }
      }
    }
  }
};

createApp(appConfig);

[chenbin92]

已发布 icejs@1.1.4 版本