feat: 添加网络超时处理

src/components/Content.vue

@@ -31,6 +31,19 @@ watch(currentKey, () => {
 })
 
 // methods
+const fetchResponse = async (key: string) => {
+  let res
+  try {
+    res = await generateText(store.currentChatMessages, key, getOpenProxy())
+  }
+  catch (error: any) {
+    return alert('[Error] 网络请求超时, 请检查网络或代理')
+  }
+  if (res.error) return alert(res.error?.message)
+
+  return res.choices[0].message.content
+}
+
 const onSubmit = async () => {
   const key = getOpenKey()
   if (!verifyOpenKey(key)) return alert('请输入正确的API-KEY')
@@ -43,27 +56,21 @@ const onSubmit = async () => {
   message.value = ''
   store.changeLoading(true)
 
-  try {
-    const res = await generateText(store.currentChatMessages, key!, getOpenProxy())
-    if (res.error) {
-      alert(res.error?.message)
-      store.changeConversations(store.currentChatMessages.slice(-1))
-      return store.changeLoading(false)
-    }
-    const content = res.choices[0].message.content
+  const content = await fetchResponse(key)
+  if (content) {
     store.changeConversations([
       ...store.currentChatMessages,
       {
         content, role: 'assistant',
       },
     ])
     speak(content)
-    store.changeLoading(false)
   }
-  catch (error) {
-    store.changeConversations(store.currentChatMessages.slice(-1))
-    store.changeLoading(false)
+  else {
+    store.changeConversations(store.currentChatMessages.slice(0, -1))
   }
+
+  store.changeLoading(false)
 }
 
 function speak(content: string) {
@@ -148,9 +155,9 @@ const translate = (text: string) => {
         v-else-if="!store.loading"
         v-model="message"
         type="text"
-        @keyup.enter="onSubmit"
         placeholder="Type your message here..."
-        input-box p-3 flex-1
+        input-box
+        p-3 flex-1 @keyup.enter="onSubmit"
       >
       <div v-else class="loading-btn">
         AI Is Thinking...

src/server/api.ts

@@ -1,17 +1,11 @@
-import { OpenAi } from '@/utils'
-
+import { OpenAi, fetchWithTimeout } from '@/utils'
 export const generateText = async (messages: ChatMessage[], apiKey: string, proxy?: string) => {
   const openai = new OpenAi(apiKey, proxy)
 
   const { url, initOptions } = openai.generateTurboPayload({ messages })
-  try {
-    const response = await fetch(url, initOptions)
-    const data = await response.json()
-    return data
-  }
-  catch (error) {
-    return `[Error] ${(error as any).message}. try again later or try using proxy`
-  }
+  const response = await fetchWithTimeout(url, 10000, initOptions)
+  const data = await response.json()
+  return data
 }
 
 export const generateDashboardInfo = async (apiKey: string, proxy?: string) => {

src/utils/tools.ts

@@ -1,3 +1,27 @@
 export const getAvatarUrl = (filename: string) => {
   return new URL(`../assets/avatars/${filename}`, import.meta.url).href
 }
+export async function fetchWithTimeout(
+  url: string,
+  timeout: number,
+  options: RequestInit = {},
+): Promise<Response> {
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => {
+    controller.abort()
+    // throw new Error(`网络请求 ${url} 已超时`)
+  }, timeout)
+
+  const { method = 'GET', headers = {}, body } = options
+
+  const response = await fetch(url, {
+    method,
+    headers,
+    body,
+    signal: controller.signal,
+  })
+
+  clearTimeout(timeoutId)
+
+  return response
+}