Асинхронный запрос mobx с разным временем выполнения

Question

Использую mobx react У меня есть фильтр, который при изменении запрашивает что-то подобное из mobx


export class OrdersStore {
  orderList: IOrder[] = [];
  isLoadingOrdersList = false;
  constructor() {
    makeObservable(this, {
      orderList: observable,
      isLoadingOrdersList: observable,
      getOrderList: action.bound,
    });
  }
  async getOrdersList(filter: IFilter = this.filter): Promise<IOrdersList[]> {
      try {
        this.isLoadingOrdersList= true;
        const { data: res } = await OrdersApi.getOrdersList(filter);
        this.orderList = res.data;
        this.isLoadingOrdersList= false;
        return res.data;
      } catch (e) {
        this.isLoadingOrdersList= false;
        throw new RestException(e);
      }
    }
}

Но что делать при двух запросах, когда первый выполняется дольше второго Выбрал фильтр, потом поменял фильтр. При этом на первую фильтрация с бэка приходит запрос с большим временем. Из-за этого у меня неправильно отображаются лоадинги и отображается в итоге то, что я получил последним, а не то, что я попросил от бэка последним

Вполне вероятно я что-то пропустил из теории

Answer 1

Самый правильный вариант - отменять старый запрос с помощью AbortController:

this.activeRequest && this.activeRequest.abort();
let request = this.activeRequest = new AbortController();

try {
    this.isLoadingOrdersList = true;

    const { data: res } = await OrdersApi.getOrdersList(filter, request.signal);

    this.orderList = res.data;
    return res.data;
} catch (e) {
    throw new RestException(e);
} finally {
    if (!request.signal.aborted) {
        this.isLoadingOrdersList = false;
    }
}

Дополнительно можно отказаться от отдельного поля isLoadingOrdersList и сделать его зависимым от activeRequest:

activeRequest: AbortController | null = null;

get isLoadingOrdersList() {
    return this.activeRequest !== null;
}

БЛОГ НА HUSL

Асинхронный запрос mobx с разным временем выполнения

Ответы (1 шт):