Как сделать код с отменой запросов и переотправкой более простым?

Question

[Антон Антон]

Есть вот такой код с отправкой запроса в апи по вводу в инпут и отменой отправки если данные изменились, а запрос ещё идет:

const citySuggest = ref()
const loadingCities = ref(false)
const citySuggestRef = useTemplateRef('citySuggestRef')
let cancelCityRequest = new AbortController
watch(() => delivery.value.city, debounce(async (val) => {
  let localSignal
  try {
    if (delivery.value.city === citySuggest.value) { return } // выбрали город из подсказки
    if (loadingCities.value) { // если еще загружем предыдущий запрос, то отменяем его
      cancelCityRequest.abort()
      cancelCityRequest = new AbortController //нужен новый контроллер, чтобы новый запрос не отменился сразу же
    }
    loadingCities.value = true
    localSignal = cancelCityRequest.signal // сохраняем локально, чтобы анализировать в finally, в глобальном объекте в это время будет новый контроллер
    const { data } = await api.get('suggest/city', { params: { q: val }, signal: localSignal })
    if (data && data !== delivery.value.city){ // если ввели название целиком, то показывать не надо
      citySuggest.value = data.value
      citySuggestRef.value.show(); // показываем список  с подсказкой
    }
  } catch (error) {
    console.error(error)
  } finally {
    if (!localSignal.aborted){
      loadingCities.value = false
    }
  }
}, 200))

и вот что-то мне прям не нравится его сложность и то, что, кажется, он может работать неверно, если тайминги сильно совпадут (индикатор загрузки не будет показываться)

Можно его как-то распутать и упростить?