XMLHttpRequest/fetch前端实现流式(stream)请求, 打印机效果

1. XMLHttpRequest

const postData = {
	// 参数
	tenant_id: 'BIZ',
	card_id: '584415218126295040'
}
let xhr = new XMLHttpRequest()
xhr.open('POST', url, true)
xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
xhr.onprogress = function () {
  console.log('流式输出', xhr.responseText)
}
xhr.onloadend = function () {
  console.log('done')
}
xhr.send(JSON.stringify(postData))

2. fetch请求

const res = await fetch(url, {
	"method": "post",
	"headers": {
		"Accept": "*",
		"content-type": "application/json",
		"accept": "text/event-stream"
	},
	"body": JSON.stringify({
		// 参数
	})
})

const reader = res.body.getReader()

// 方式一 start------------------
const decoder = new TextDecoder('UTF-8')
function processStreamResult (result) {
	if (result.done) {
		return
	}

	const chunk = decoder.decode(result.value, { stream: !result.done })

	if (!result.done) {
		return reader.read().then(processStreamResult)
	}
}
return reader.read().then(processStreamResult)
// end ------------------------

// 方式二 start-----------------
while (true) {
	const { value, done } = await reader.read()
	if (done) {
		console.log('流式输出结束')
		break
	} {
		let val = new TextDecoder().decode(value)
		console.log('流式输出 val')
	}
}
// end ------------------------

 

如果项目请求链路比较长, 会出现开发环境有输出效果, 但是测试环境没有, 可以在对应的nginx配置中加:

       location /××× {

                proxy_buffering off;

                chunked_transfer_encoding on;

        }