Как передавать данные кусок за куском в Django с помощью StreamingHttpResponse и получать их на фронт-энде с помощью axios?

Я пытаюсь передавать данные с бэкенда Django на фронтенд, используя StreamingHttpResponse и axios. Однако я сталкиваюсь с проблемой, когда данные буферизируются и поступают во front-end только после того, как все данные готовы или когда я останавливаю сервер. Я использую приведенный выше код для бэкенда и фронтенда. Я хотел бы узнать, как я могу предотвратить эту буферизацию и получать данные по частям в событии onDownloadProgress в axios.

Бэкэнд: 

def iterator():
    for i in range(1000):
        yield f'chunk: {i}'
        sleep(0.2)


def generate_post_text(request):
    stream = iterator()
    response = StreamingHttpResponse(stream, status=200, 
               content_type='text/event-stream'')
    response['Cache-Control'] = 'no-cache'
    response['X-Accel-Buffering'] = 'no'
    response.streaming = True
    return response

А вот код фронт-энда:

axios({
            url: '/api/gpt3/generate-post-text',
            method: 'GET',
            onDownloadProgress: progressEvent => {
                const dataChunk = progressEvent.currentTarget.response
                console.log(dataChunk)
            },

        }).then(({data}) => Promise.resolve(data))

Бэкенд промежуточные модули:

MIDDLEWARE = [
'whitenoise.middleware.WhiteNoiseMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',]

Я запускаю сервер локально на компьютере Mac

Похоже, что это не проблема с вашим django StreamingHttpResponse, а скорее проблема с вашим front end libray axios, который не работает в streaming режиме, вы должны использовать responseType опцию, чтобы сказать Axios, что вы хотите получить доступ к сырому потоку ответа:

Ссылка на документ Axios здесь.

axios({
    url: '/api/gpt3/generate-post-text',
    method: 'GET',
    responseType: 'stream',  // add this line
    onDownloadProgress: progressEvent => {
        const dataChunk = progressEvent.currentTarget.response
        console.log(dataChunk)
    },

}).then(({data}) => Promise.resolve(data))

Вернуться на верх