eventsource使用姿势

394 阅读1分钟
import { fetchEventSource } from '@microsoft/fetch-event-source';

const submit = async () => {

    if( !validate(input, store) ) return

    const res = await fetch(icon)
    const iconContent = await res.text()

    const loading = ElLoading.service({
      lock: true,
      text: '智能体运行中...',
      background: 'rgba(0, 0, 0, 0.7)',
      spinner: iconContent
    })

    try {

      await fetchEventSource('https://api.coze.cn/v3/chat', {
        method: 'post',
        headers: {
          "Content-Type": 'application/json',
          Authorization: 'Bearer ' + store.cozeToken,
        },
        openWhenHidden: true,
        
        body: setEventSourceBody(store, input),
        onmessage(ev) {
          const { event, data } = ev
          const { conversation_id,chat_id, type, last_error} = JSON.parse(data)

          if(event === 'conversation.chat.failed') {
            loading.close()
            ElMessage.warning(last_error.msg)
            return
          }
            
          if(event === 'conversation.message.completed') {
            
            if(type === 'answer') {
              
              getAnswerDetailFromBotApi({
                conversation_id,
                chat_id
              }).then(res => {
  
                loading.close()
  
                if(res.code !==0) {
                  ElMessage.warning(res.msg)
                  return
                }
                
                handleCozeOutput(res.data, store)
  
              })
            }
          }
        },
        onerror(err) {
          ElMessage.warning(err)
          loading.close()
          throw err
        },
      });
    } catch (error) {
      console.log(error);
      loading.close()
      ElMessage.error('令牌失效或工作流故障,请更新令牌或检查工作流')
    }
  }