Как передавать данные кусок за куском в 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))