vue中如何封装fetch请求

1.创建streamRequest.js文件，放入下方代码

// 创建 fetch 实例
const service = {
  baseURL: process.env.VUE_APP_BASE_API, 
  timeout: 300000,
  responseType: 'text', // 修改为text类型
}

// 请求拦截器
const requestInterceptor = (config) => {
  // 确保 config.headers 存在
  config.headers = config.headers || {};
  config.headers['Content-Type'] = 'application/json';
  return config;
}

// 发送请求
service.request = async (config) => {
  config = requestInterceptor(config);
  const url = `${service.baseURL}${config.url}`;
  const response = await fetch(url, {
    method: config.method || 'GET',
    headers: config.headers,
    body: config.data ? JSON.stringify(config.data) : undefined,
  });

  if (!response.body) {
    throw new Error('Response body is null');
  }

  // 读取数据流
  const reader = response.body.getReader();
  // 文本解码器
  const decoder = new TextDecoder();
  let buffer = '';

  return {
    data: {
      async *[Symbol.asyncIterator]() {
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;

          buffer += decoder.decode(value, { stream: true });
          const lines = buffer.split('\n');
          buffer = lines.pop() || '';

          for (const line of lines) {
            if (line.trim()) {
              try {
                const data = JSON.parse(line);
                yield data;
              } catch (e) {
                console.error('解析流数据失败:', e);
              }
            }
          }
        }
      }
    }
  };
}

export default service;

2.引入对应的api文件中，并进行使用

import streamRequest from '@/utils/streamRequest'

// 流式对话
export function streamDialogue(data) {
  return streamRequest.request({
    url: '', //替换为自己的api接口
    method: 'post',
    data: data
  })
}