Управление промисами в JavaScript

promise.withResolvers() — удобный метод в JavaScript для создания промиса и доступа к его resolve и reject. Это упрощает управление промисами.

Пример:

const { promise, resolve, reject } = promise.withResolvers();

promise.then(value => {
    console.log('Промис выполнен с:', value);
}).catch(error => {
    console.error('Промис отклонен с ошибкой:', error);
});

// Разрешение промиса
setTimeout(() => resolve('Успех!'), 2000);

// или отклонение промиса
// setTimeout(() => reject('Ошибка!'), 2000);

Реализация promise.withResolvers():

function promiseWithResolvers() {
    let resolve, reject;
    const promise = new Promise((res, rej) => {
        resolve = res;
        reject = rej;
    });
    return { promise, resolve, reject };
}

Этот метод полезен для управления асинхронными операциями из внешнего контекста.

👉 @web_craft | #frontend

Объединение веб-приложений и нативных приложений с помощью неизвестных JavaScript API

Статья описывает четыре малоизвестных JavaScript API, которые помогают сблизить возможности веб-приложений с нативными. API Web Share позволяет веб-приложениям делиться контентом с другими приложениями на устройстве пользователя. Статья включает примеры и код для внедрения этих API, показывая, как они могут улучшить взаимодействие пользователей с веб-приложениями.

👉 @web_craft | #frontend

Neuro Noise

Интерактивный фон реализованный с использованием GLSL.

👉 @web_craft | #frontend

Прерывание запросов в JavaScript с помощью AbortSignal

AbortSignal — это встроенный объект в JavaScript, который используется для отмены асинхронных операций, таких как сетевые запросы, до их завершения. Это полезно для управления долгими или ненужными запросами.

Метод AbortSignal.timeout() позволяет установить тайм-аут для запроса fetch. Если запрос не завершится за заданное время, он будет автоматически отменен.

Пример использования:

async function fetchData() {
  try {
    const response = await fetch(url, {
      signal: AbortSignal.timeout(5000)
    });
    // Обработка успешного ответа
  } catch (e) {
    if (e.name === 'TimeoutError') {
      // Обработка ошибки тайм-аута
    } else {
      // Обработка других ошибок
    }
  }
}

В этом примере запрос будет отменен, если ответ не поступит в течение 5 секунд. Если запрос отменен по причине истечения времени, будет выброшена ошибка TimeoutError.

👉 @web_craft | #frontend

Запуск приложения Remix с Postgres, используя Prisma

Статья объясняет, как создать приложение на Remix с использованием базы данных Postgres и ORM Prisma. Руководство включает настройку и развертывание приложения на платформе Fly.io, а также настройку базы данных и переменной окружения для подключения.

👉 @web_craft | #frontend

Neon Clock

Неоновые анимированные часы на CSS.

👉 @web_craft | #frontend

Работа с scheduler.postTask

Какой приоритет задачи можно задать с помощью scheduler.postTask?

Забыли? Вернитесь к посту от 08.07.2024.

👉 @web_craft | #frontend

Опустошение массива с length в JavaScript

Свойство length массивов в JavaScript можно использовать для управления длиной массива, включая его обрезку или полное опустошение.

Пример использования:

const arr = [0, 1, 2, 3, 4, 5];

arr.length = 3;
console.log(arr); // [0, 1, 2]

arr.length = 0;
console.log(arr); // []

Если задать значение length меньше текущей длины массива, элементы удаляются с правого конца, чтобы соответствовать новой длине. Если задать значение больше текущей длины, в конец массива добавляются пустые элементы.

Этот трюк часто используется для быстрого опустошения массива, устанавливая его length в 0. Такой подход удобен для очистки данных и освобождения памяти.

👉 @web_craft | #frontend

Использование WebSockets с Next.js

Статья описывает процесс создания приложения для чата в реальном времени с использованием WebSockets в Next.js. В ней объясняется, как настроить кастомный сервер Next.js для поддержки WebSocket, и пошагово показывается, как создать простое приложение для чата, включая клиентскую и серверную части. Также рассматриваются особенности и преимущества использования Fly.io для развертывания Next.js приложений с WebSockets.

👉 @WebCraft | #frontend

Fire - Simple 2D + CSS animation

Анимация спички на CSS.

👉 @WebCraft | #frontend

Метод работы с промисами

Какой метод в JavaScript позволяет создать промис и получить доступ к его resolve и reject?

Забыли? Вернитесь к посту от 16.07.2024.

👉 @web_craft | #frontend

Управление асинхронными операциями в JavaScript

AbortController — это встроенный объект в JavaScript, который позволяет управлять и отменять асинхронные операции.

Пример использования:

const controller = new AbortController();
const signal = controller.signal;

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data', { signal });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Запрос был отменен');
    } else {
      console.error('Произошла ошибка:', error);
    }
  }
}

// Запуск запроса
fetchData();

// Отмена запроса через 5 секунд
setTimeout(() => {
  controller.abort();
}, 5000);

В этом примере создается экземпляр AbortController, а его signal передается в запрос fetch. Если запрос не завершится в течение 5 секунд, он будет автоматически отменен вызовом метода abort.

👉 @web_craft | #frontend

Типы данных JavaScript

Статья рассказывает о типах данных в JavaScript. В ней рассматриваются примитивные и сложные типы данных. Примитивные типы данных неизменяемы, то есть их нельзя изменить. Примеры примитивных типов данных включают строки, числа, булевы значения, null и undefined. Сложные типы данных - это массивы и объекты. Массивы могут хранить коллекции данных одного типа. Объекты могут хранить коллекции данных разных типов.

👉 @web_craft | #frontend