上一篇讲到openai文本补全功能，nextjs给出参考的例子，但是这个例子有很多弊端，不好用，所以又查找大量资料后，用axios可以实现流的输出。

为什么要用流输出？openai生成文本过程比较慢，等待时间长，用流输出可以快速输出内容（经测试这个速度是可以接受的）。

//api 内容
import { Configuration, OpenAIApi } from 'openai'

const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});
export default async (req, res, locale) => {
    const { prompt, temperature } = req.body
    const payload = {
        model: "text-davinci-003",
        prompt,
        temperature: temperature ? temperature : 0.7,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0,
        // max_tokens: max_tokens,
        stream: true,
        n: 1,
    };
    console.log("openai.createCompletion", payload);

    const openai = new OpenAIApi(configuration);
    const response = openai.createCompletion(payload, { responseType: 'stream' });
    res.statusCode = 200
    response.then(resp => {
        resp.data.on('data', data => {
            const lines = data.toString().split('\n').filter(line => line.trim() !== '');
            for (const line of lines) {
                const message = line.replace(/^data: /, '');
                if (message === '[DONE]') {
                    res.end();
                } else {
                    const parsed = JSON.parse(message);
                    console.log(parsed.choices[0].text)
                    res.write(data)
                }

            }
        });
    }).catch((err) => {
        let code = 429, data = null, message = "";
        if (err.response) {
            let err_response = err.response
            code = err_response.status
            message = err_response.statusText
        }
        res.statusCode = code
        res.json({
            code,
            data,
            message
        });
    })
}

//前端页面
import { useState } from 'react';
import axios from 'axios';
export default function home(){
    const [GeneratedBios, setGeneratedBios] = useState(null)
    const onClick=()=>{
        axios({
            url: "/api/openAI/createCompletionStream",
            method: "POST",
            data: {
                prompt: "hello world",
            },
            headers: {
                "Content-Type": "application/json",
            },
            // onUploadProgress:(p)=>{
            //     console.log("onUploadProgress",p)
            // },
            onDownloadProgress: (progressEvent) => {
                console.log("onDownloadProgress", progressEvent)
                const dataChunk = progressEvent.currentTarget.response;
                const lines = dataChunk.toString().split('\n').filter(line => line.trim() !== '');
                let text = "";
                for (const line of lines) {
                    const message = line.replace(/^data: /, '');
                    if (message === '[DONE]') {
                    } else {
                        const parsed = JSON.parse(message);
                        // console.log("", typeof parsed.choices[0].text);
                        text += parsed.choices[0].text
                        // let GeneratedBios1 = (prev) => prev + parsed.choices[0].text
                        setGeneratedBios(text);
                    }

                }
                console.log("dataChunk", dataChunk);
            }
        }).then((data) => {
            console.log("data", data);
        })
    }
    return(
        <>
            <button onClick={onClick}>createChatCompletion</button>
            <div id="result">{GeneratedBios}</div>
        </>
    )
}

具体例子：https://download.csdn.net/download/qq_41211900/87672508?spm=1001.2014.3001.5503