javascript - 我无法将响应打印回文本区域

Question

我正在使用chatGPT api来制作任何chrome扩展，该扩展可以在您必须编写帮助的任何输入区域中使用:您的问题；并且 chatGpt 在同一输入区域中回复您。现在的问题是我为此创建了一个 content.js 文件并将其安装为 chrome 扩展，并且每当我在输入区域中输入 help: some prompt ;它给出了错误

控制台日志:响应{type: 'cors', url: 'https://api.openai.com/v1/chat/completions', 重定向: false, 状态: 200, ok: true, ... }body: (...)bodyUsed: falseheaders: header {}ok: trueredirected: falsestatus: 200statusText: ""type: "cors"url: "https://api.openai.com/v1/chat/completions"[ [原型(prototype)]]:响应

错误:content.js:52 TypeError:无法读取 content.js:36:34 处未定义的属性(读取“json”)

给出错误的行: .then((response) => response.json())

这是我的整个代码:

// Define a function to show help prompts
   function showHelp() {
// Get the current input or textarea element
   var activeEl = document.activeElement;
// Get the user's command from the input or textarea element
   var inputText = "";
   if ("value" in document.activeElement) {
   inputText = document.activeElement.value.trim();
   } else {
   inputText = document.activeElement.innerText.trim();
   }
   var command = inputText.substr(
   inputText.indexOf("help:") + 5,
   inputText.indexOf(";")
   );
// Call the OpenAI API to generate a response based on the user's command
   fetch("https://api.openai.com/v1/chat/completions", {
   method: "POST",
headers: {
  "Content-Type": "application/json",
  Authorization:
    "Bearer API-key(I removed it )",
},
body: JSON.stringify({
  model: "gpt-3.5-turbo",
  messages: [{"role": "user", "content": command}],
  temperature: 0.7,
  max_tokens: 256,
  n: 1,
  stop: "\n",
  }),
 })
.then((data) => console.log(data))
.then((response) => response.json())
.then((data) => {
  var responseObj = JSON.parse(data);

  // Access the generated text from the response object
  var generatedText = responseObj["choices"][0]["text"];

  // Do something with the generated text, such as display it on the page
  if ('value' in document.activeElement) {
    document.activeElement.value = generatedText;
  } else if ('innerText' in document.activeElement) {
    document.activeElement.innerText = generatedText;
  } else {
    console.error('Error: could not set input value');
  }
})
.catch((error) => console.log(error));
}
// Listen for changes in the input or textarea element's value
   document.addEventListener("input", function (event) {
  // Get the current input or textarea element
  var activeEl = document.activeElement;
 // Get the input or textarea element's value
  var inputText = "";
  if ("value" in document.activeElement) {
  inputText = document.activeElement.value.trim();
  } else {
  inputText = document.activeElement.innerText.trim();
  }
 // Check if the input or textarea element's value end with ";"
  if (inputText.trim().endsWith(";")) {
 // Call the showHelp function
  showHelp();
  }
  });

Answer 1

这破坏了你的 promise 链:

.then((data) => console.log(data))

console.log 不返回任何内容，因此解析为 undefined，然后您尝试取消引用 undefined:

.then((response) => response.json())

从第一个返回数据，或者将两者结合起来:

.then((data) => {
  console.log(data);
  return data.json();
})