vue项目如何在h5网页中接入扣子（coze）api，实现AI对话

此时默认你已完成coze工作流搭建及鉴权相关配置或开发 本文纯前端

方案一 使用流式响应完成前端对话

第一步：安装所需依赖

npm install @coze/api

第二步： 封装调用方法

    // 新建coze.js 文件
    
    // 使用流式数据响应推荐使用Coze SDK 调用
    import { CozeAPI } from '@coze/api';
    // 这里可以使用store获取token动态配置
    const token = 'pat_************'
    const apiClient = new CozeAPI({
      token: token,
      baseURL: 'https://api.coze.cn',
      allowPersonalAccessTokenInBrowser:true
    });
    
    import http from 'axios'
    // 导出对应调用方法
    export const chatApiv1 = (params) => {
      return apiClient.chat.stream(params);
    }
    // 查询会话列表
    export const conversationList = (params) => {
      return http.get('/chatApiv1/conversation/retrieve',{params})
    }
    // 获取消息列表   
    export const getMessageList = (params,id) => {
      return http.post('/chatApi/v1/conversation/message/list?conversation_id='+id,params)
    }
    ...

第三步： 页面组件中调用方法

// 引入api
import {chatApiv1} from '@/apis/coze'
  //使用方法
   const ws = await chatApiv1({
        bot_id: import.meta.env.VITE_BASE_BOT_ID, // 全局配置方便替换
        user_id: userId.value, //可选  用来区分用户
        additional_messages: additional_messages.value,  // 记录交互信息
        auto_save_history: true, // 可选  保存历史记录
        stream: true,// 可选  是否流式响应
        conversation_id:chatRarams.value.conversation_id // 可选  对话基于某次会话
      })
       const getMessage = async (Fn) => {
          let condition = true
          
          while (condition) {
           const res =  await Fn.next()
            condition = !res.done // done = true 代表当次对话结束
            console.log('res',res);

          }
        }
      // 调用响应结果处理方法
      getMessage(ws)
      
     

方案二 使用非流式响应完成前端对话（轮询查询对话结果）

直接上页面组件中调用方法

// 引入api
import {chatApiv1, retrieve,getMessageList} from '@/apis/coze'
  //使用方法
   const ws = await chatApiv1({
        bot_id: import.meta.env.VITE_BASE_BOT_ID, // 全局配置方便替换
        user_id: userId.value, //可选  用来区分用户
        additional_messages: additional_messages.value,  // 记录交互信息
        auto_save_history: true, // 可选  保存历史记录
        conversation_id:chatRarams.value.conversation_id // 可选  对话基于某次会话
      })
           // 轮询调用查询响应结果
    await getChatHis(res)
    
    
    const getChatHis = async (res) => {
        const result = await retrieve(params)
      /**
       * -   created：对话已创建。
       * -   in_progress：智能体正在处理中。
       * -   completed：智能体已完成处理，本次对话结束。
       * -   failed：对话失败。
       * -   requires_action：对话中断，需要进一步处理。
       * -   canceled：对话已取消。
      */
      if (result.data.status === 'failed') {
        // 错误处理
        showFailToast(result.data.last_error.msg)
        return
      };
      if (['requires_action', 'completed'].includes(result.data.status)) {
        // 获取对话列表
        getTalkList()
        return
      }
      setTimeout(() => getChatHis(res), 1000)
    }
    
     const getTalkList = () => {
      return getMessageList({ ...chatRarams.value, chat_id: chatId.value }, chatRarams.value.conversation_id).then(res => {
        if (res.code === 0) {
          if (!res.data || !res.data.length) {
          // 错误响应处理
            return
          };
         //  res.data 响应结果数组
         
        }
      })
    }