如何取消调用Chat-GPT与Next.js OpenAI示例

rbpvctlc  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(122)

在Next.js示例中:https://github.com/vercel/examples/tree/main/solutions/ai-chatgpt,有一个while循环,它迭代流以从OpenAI的ChatGPT取回令牌。我想添加一个取消按钮,以停止流,而它是输出。
我在这里读了docs:https://sdk.vercel.ai/docs/concepts/backpressure-and-cancellation,我相信我应该能够停止do while循环,这应该足够了。
我认为React组件生命周期让我很困惑,因为即使我创建了一个“取消”状态,并将其放入循环中,就像这样:

while (!done && !cancelled) {
  const { value, done: doneReading } = await reader.read();
  done = doneReading;
  const chunkValue = decoder.decode(value);
  ...

字符串
然后通过呈现它来验证我已经设置了cancelled状态,while循环仍然没有停止处理。
我如何停止while循环在react组件中运行,就像我上面引用的Next示例一样。

6vl6ewon

6vl6ewon1#

若要停止循环运行,请使用可变引用或对象属性来跟踪操作是否已取消,并在循环的每次迭代中检查此值

let cancelObject = { cancelled: false };  //  track whether operation has been cancelled

const fetchData = async () => {
    const reader = yourStream.getReader();
    let { value, done } = await reader.read();
    const decoder = new TextDecoder('utf-8');
    let completeMessage = '';
    
    while (!done && !cancelObject.cancelled) {
      const chunkValue = decoder.decode(value);
      completeMessage += chunkValue;
      
      let result = await reader.read();
      value = result.value;
      done = result.done;
    }

    //  if not cancelled
    if (!cancelObject.cancelled) {
      console.log(completeMessage);
    }
};

const cancel = () => {
  cancelObject.cancelled = true;  // Trigger cancellation
};

fetchData();

字符串
稍后您可以调用cancel函数来停止while循环

cancel();

相关问题