Bigfish接口请求失败导致阻塞异步任务执行问题

1. 场景

用户反馈antd Table组件的分页器失效

检查之后发现逻辑没有问题，唯一的问题是页面中有两个搜选接口500

经过分析确认了原因，接口报错导致阻塞异步任务(分页器)执行。

2.解决方法

因为用的是bigfish框架，接口通过dva统一管理，代码如下：

const VersionModel = {
  namespace: 'version',
  state: {},
  reducers: {
    restate: (state, { payload }) => ({ ...state, ...payload }),
  },
  effects: {
    *getAppList({ payload }, { call, put }) {
      yield put({
        type: 'restate',
        payload: {
          loading: true,
        },
      });

      const response = yield call(getAppList, payload);
      if (response.success) {
        yield put({
          type: 'restate',
          payload: {
            productsAppList: response.data,
          },
        });
      } else {
        message.error('数据获取失败' + response.errorMsg);
      }

      yield put({
        type: 'restate',
        payload: {
          loading: false,
        },
      });
    },
  },
};
export default VersionModel;

找到接口之后，添加trycarch拦截，需要注意的是必须要在此处拦截，否则拦截是不生效的:

const VersionModel = {
  namespace: 'version',
  state: {},
  reducers: {
    restate: (state, { payload }) => ({ ...state, ...payload }),
  },
  effects: {
    *getAppList({ payload }, { call, put }) {
      yield put({
        type: 'restate',
        payload: {
          loading: true,
        },
      });

     // 在此处添加错误拦截
     try {
        const response = yield call(getAppList, payload);
        if (response.success) {
          yield put({
            type: 'restate',
            payload: {
              productsAppList: response.data,
            },
          });
        } else {
          message.error('数据获取失败' + response.errorMsg);
        }
      } catch (error) {
        console.log(error);
      }

      yield put({
        type: 'restate',
        payload: {
          loading: false,
        },
      });
    },
  },
};
export default VersionModel;

3.分析

 因为js是单线程，只有主线程的任务执行完之后才会执行异步请求，接口无法加载数据导致主线程阻塞，所以像分页器这些异步请求就无法发起执行。