Как можно вернуть значение из функции, которая использует `fetch`?

Почему функция getBase64String не возвращает base64String, полученный внутри обработчика события onloadend? Возможно ли извлечь данные из fetch и вернуть их из функции?
  • 4 января 2024 г. 6:18
Ответы на вопрос 2
Функция `fetch` используется для асинхронного выполнения HTTP-запросов в JavaScript. Поскольку `fetch` работает асинхронно, она возвращает промис, который позволяет использовать полученные данные после их успешного получения. Поэтому вы не можете просто вернуть значение из функции, которая использует `fetch`; вместо этого вы должны работать с промисами, используя `then` или асинхронные функции с `await`.

Когда вы делаете запрос через `fetch`, полученный ответ (обычно в виде потока) можно преобразовать в Blob, Array Buffer или JSON. Если вы хотите преобразовать ответ в строку base64, вам нужно сначала получить Blob или Array Buffer, а затем использовать FileReader или другие методы для преобразования этих данных в base64.

Вот пример функции, которая получает изображение по URL, преобразует его в base64 и возвращает строку base64:

```javascript
async function getBase64String(url) {
  // Запрашиваем данные через fetch и ждём ответа
  const response = await fetch(url);
  // Убеждаемся, что запрос завершился успешно
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  
  // Получаем Blob
  const blob = await response.blob();
  
  // Возвращаем промис, который разрешится с base64 строкой
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    
    // Обработчик, который будет вызван после окончания чтения
    reader.onloadend = () => {
      // reader.result содержит base64 строку
      resolve(reader.result);
    };
    
    // Обработчик ошибки чтения
    reader.onerror = (error) => {
      reject(error);
    };
    
    // Читаем содержимое как base64
    reader.readAsDataURL(blob);
  });
}

// Использование асинхронной функции с промисом
(async () => {
  try {
    const base64String = await getBase64String('https://url-to-image.com/image.png');
    console.log(base64String); // Здесь у вас будет строка base64
  } catch (error) {
    console.error(error);
  }
})();
```

`getBase64String()` возвращает промис, поэтому для извлечения данных из неё нужно либо использовать `await` внутри асинхронной функции (как в примере выше), либо использовать метод `.then()` для работы с промисами в более традиционном синтаксисе.
Лучше <a href="https://learn.javascript.ru/promise-basics" rel="nofollow">вот это</a> изучить.
Похожие вопросы