ReadableStream с Axios не работает в Safari, но работает в Chrome и Firefox

Я создаю приложение для чата с AI API, например Там я всегда получаю эту ошибку:

[Log] Error: (handleError.ts, line 8)
AxiosError

cause: TypeError: ReadableByteStreamController is not implemented

column: 28

config: {transitional: {silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false}, adapter: "fetch", transformRequest: Array, transformResponse: Array, timeout: 0, …}

line: 1697

message: "ReadableByteStreamController is not implemented"

name: "TypeError"

request: Request

body: ReadableStream {locked: true}

bodyUsed: true

cache: "default"

credentials: "same-origin"

destination: ""

headers: Headers {append: function, delete: function, get: function, has: function, set: function, …}

integrity: ""

keepalive: false

method: "POST"

mode: "cors"

redirect: "follow"

referrer: "about:client"

referrerPolicy: ""

signal: AbortSignal {aborted: false, reason: undefined, onabort: null, throwIfAborted: function, addEventListener: function, …}

url: "http://localhost:3000/conversations/cht_GHyzT4yB35_363xN"

Request Prototyp

sourceURL: "http://localhost:5173/node_modules/.vite/deps/axios.js?v=e4786436"

stack: "AxiosError@http://localhost:5173/node_modules/.vite/deps/axios.js?v=e4786436:375:2…"

AxiosError Prototyp

Для своих вызовов API я использую оболочку Axios, которая делает запрос потоковой передачи следующим образом:

 async stream(data: any) {
        try {
            console.info("Sending request")
            const response = await instance.post(this.baseUrl, data, { headers: {
                'Accept': 'text/event-stream',
              },
              responseType: 'stream',
              adapter: 'fetch'
             });
            // Handle response data
            console.info("Request sent")
            return { data: response.data, error: null };
        } catch (error) {
            // Handle errors
            const handledError = await handleError(error);
            return { data: null, error: handledError };
        }
    }

При этом «Запрос отправлен» не регистрируется на консоли, поэтому ошибка должна быть в почтовом запросе.

Запрос в Safari завершился быстро, вероятно, с поступлением первого фрагмента данных. В журналах API говорится, что для запросов с Safari требуется всего пара мс для завершения.

axios request server-sent-events http-streaming

05.07.2024 21:36

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я нашел обходной путь, используя собственную библиотеку fetch() браузера, которая отлично работает. Проблема, кажется, в Axios.

Обновлено: это рабочий обходной путь.

async *stream(data: any) {
  try {
    console.info('Sending request');
    const response = await fetch(this.baseUrl, {
      method: 'POST',
      headers: {
        Authorization: 'Bearer ' + token
        Accept: 'text/event-stream',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (response.body) {
      const reader = response.body.getReader();
      const decoder = new TextDecoder('utf-8');

      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          break;
        }
        const chunk = decoder.decode(value, { stream: true });
        yield chunk;
      }
    }

    console.info('Request sent');
  } catch (error) {
    const handledError = await handleError(error);
    yield { error: handledError };
  }
}

А затем используйте эту функцию для доступа к потоку:

async function handleStream() {
  const streamGenerator = await api
    .from('conversations')
    .byId(conversation.id)
    .stream({
      input
    });

  for await (const chunk of streamGenerator) {
    if (chunk.error) {
      // Handle error
      console.error(chunk.error);
      break;
    }
    // Process the chunk
    console.info(chunk);
    // Update your UI with the new chunk of data
  }
}

Можете ли вы показать свой обходной путь? Также см. developer.mozilla.org/en-US/docs/Web/API/… (обратите внимание, что он не поддерживается в Safari) — хотя кажется странным, что axios мог бы быть построен на чем-то без основного браузера.

— 06.07.2024 13:24

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

— 07.07.2024 01:21

@DarrenCook отредактировал ответ. Возможно, я сделал что-то не так, но, поскольку вы связали документы, Safari не поддерживает их, и я всегда получал такую ошибку.

— 07.07.2024 17:39

05.07.2024 23:30