Управление асинхронностью в современном JavaScript: за пределами await

async function fetchUserData(userId) {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) throw new Error('Failed to fetch user');
  return response.json();
}

// Ошибка "съедается" без обработки
const user = await fetchUserData(userId);
updateUI(user);

// Линейная цепочка замедляет работу
const profile = await loadProfile();
const posts = await loadPosts(); // Ожидание завершения loadProfile
const friends = await loadFriends(); // Ожидание предыдущих

// Запрос нельзя отменить
async function search(query) {
  const results = await fetchResults(query);
  // Что если пользователь изменил запрос?
}

function safeAsync(promise) {
  return promise
    .then(data => [null, data])
    .catch(error => [error, null]);
}

// На практике
const [userError, user] = await safeAsync(fetchUserData(123));

if (userError) {
  handleError(userError);
  return;
}

processUser(user);

function safeAsync<T>(promise: Promise<T>): Promise<[Error | null, T | null]> {
  return promise
    .then<[null, T]>((data) => [null, data])
    .catch<[Error, null]>((err) => [err instanceof Error ? err : new Error(String(err)), null]);
}

// Медленный вариант
const a = await fetchA();
const b = await fetchB(); 

const [a, b] = await Promise.all([fetchA(), fetchB()]);

const controllers = new Map();

async function fetchWithCancel(id, signal) {
  const resp = await fetch(`/data/${id}`, { signal });
  return resp.json();
}

fetchItems(ids) {
  ids.forEach(id => {
    const controller = new AbortController();
    controllers.set(id, controller);
    fetchWithCancel(id, controller.signal);
  });
}

// Отмена конкретного запроса
function cancelFetch(id) {
  controllers.get(id)?.abort();
  controllers.delete(id);
}

const searchController = new AbortController();

async function searchProducts(query) {
  try {
    const response = await fetch(`/search?q=${query}`, {
      signal: searchController.signal
    });
    return response.json();
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('Запрос отменён');
      return [];
    }
    throw err;
  }
}

// При изменении поискового запроса
function handleSearchChange(query) {
  searchController.abort();  // Отмена предыдущего запроса
  searchController = new AbortController();
  searchProducts(query);
}

function createCancellableAsync(task) {
  const controller = new AbortController();
  
  const promise = task(controller.signal);
  
  return {
    promise,
    cancel: () => controller.abort()
  };
}

// Использование
const { promise, cancel } = createCancellableAsync(async (signal) => {
  const user = await fetchUser({ signal });
  const orders = await fetchOrders(user.id, { signal });
  return { user, orders };
});

// По событию отмены
cancelButton.addEventListener('click', cancel);

const results = await Promise.allSettled([
  fetchConfig(),
  fetchUserData(),
  loadPreferences()
]);

const successfulResults = results
  .filter(result => result.status === 'fulfilled')
  .map(result => result.value);

const errors = results
  .filter(result => result.status === 'rejected')
  .map(result => result.reason);

class TaskQueue {
  constructor(concurrency) {
    this.concurrency = concurrency;
    this.running = 0;
    this.queue = [];
  }

  addTask(task) {
    return new Promise((resolve, reject) => {
      this.queue.push({
        task,
        resolve,
        reject
      });
      this.next();
    });
  }

  next() {
    while (this.running < this.concurrency && this.queue.length) {
      const { task, resolve, reject } = this.queue.shift();
      this.running++;
      
      task()
        .then(resolve)
        .catch(reject)
        .finally(() => {
          this.running--;
          this.next();
        });
    }
  }
}

// Использование: максимум 3 одновременных запроса
const apiQueue = new TaskQueue(3);

const results = await Promise.all([
  apiQueue.addTask(() => fetch('/data/1')),
  apiQueue.addTask(() => fetch('/data/2')),
  // ... 10 задач
]);

async function loadDashboard() {
  const [userErr, user] = await safeAsync(fetchUser());
  if (userErr) throw userErr;
  
  const [prefsErr, prefs] = await safeAsync(fetchPrefs(user.id));
  if (prefsErr) throw prefsErr;
  
  const [notificationsErr, notifications] = await safeAsync(
    fetchNotifications(user.id, prefs.lastSeen)
  );
  
  return { user, prefs, notifications };
}

const dashboardData = {
  user: null,
  prefs: null,
  notifications: null
};

const fetchOperations = [
  async () => { dashboardData.user = await fetchUser(); },
  async () => { 
    if (!dashboardData.user) return;
    dashboardData.prefs = await fetchPrefs(dashboardData.user.id);
  },
  async () => {
    if (!dashboardData.prefs) return;
    dashboardData.notifications = await fetchNotifications(
      dashboardData.user.id, 
      dashboardData.prefs.lastSeen
    );
  }
];

await Promise.allSettled(fetchOperations.map(op => op()));

const progress = new ProgressEmitter();

async function bulkUpload(files) {
  progress.started(files.length);
  
  await Promise.all(files.map(async (file, index) => {
    await uploadFile(file);
    progress.increment();
  }));
  
  progress.complete();
}

function useAbortableFetch() {
  const abortControllerRef = useRef(null);
  
  useEffect(() => {
    return () => abortControllerRef.current?.abort();
  }, []);
  
  return async (url, options) => {
    abortControllerRef.current?.abort();
    const controller = new AbortController();
    abortControllerRef.current = controller;
    
    try {
      const response = await fetch(url, { 
        ...options, 
        signal: controller.signal 
      });
      return response.json();
    } catch (err) {
      if (err.name !== 'AbortError') throw err;
    }
  };
}

test('should cancel previous request', async () => {
  const fetchSpy = jest.fn();
  const search = createSearch(fetchSpy);
  
  search('react');
  search('angular'); // Отменяет "react"
  
  await new Promise(resolve => setTimeout(resolve, 10));
  
  expect(fetchSpy).toHaveBeenCalledTimes(2);
  expect(fetchSpy.mock.calls[0][0].signal.aborted).toBe(true);
  expect(fetchSpy.mock.calls[1][0].signal.aborted).toBe(false);
});