Fecth

是浏览器原生的 API.不依赖与任何插件可以直接发送请求

基本用法

fetch(url, options)
  .then(function (response) {
    // 在这里使用 response 对象
  })
  .catch(function (error) {
    // 在这里处理错误
  });

参数

• url: 请求的 URL 地址
• options: 可选参数，用于配置请求的参数

实例

/**
 * @Author: jsopy
 * @Date: 2025-08-29 15:12:08
 * @LastEditTime: 2025-08-29 19:47:33
 * @FilePath: /新建文件夹/src/utils/request.js
 * @Description:
 * @ 发送表单数据 'Content-Type': 'application/x-www-form-urlencoded',
 * @ 发送json数据 'Content-Type': 'application/json',
 * @ 发送文件 'Content-Type': 不要设置,
 */
// 定义状态码消息映射
const codeMessage = {
  200: "服务器成功返回请求的数据。",
  201: "新建或修改数据成功。",
  202: "一个请求已经进入后台排队（异步任务）。",
  204: "删除数据成功。",
  400: "发出的请求有错误，服务器没有进行新建或修改数据的操作。",
  401: "用户没有权限（令牌、用户名、密码错误）。",
  403: "用户得到授权，但是访问是被禁止的。",
  404: "发出的请求针对的是不存在的记录，服务器没有进行操作。",
  406: "请求的格式不可得。",
  410: "请求的资源被永久删除，且不会再得到的。",
  422: "当创建一个对象时，发生一个验证错误。",
  500: "服务器发生错误，请检查服务器。",
  502: "网关错误。",
  503: "服务不可用，服务器暂时过载或维护。",
  504: "网关超时。",
};

// 请求配置
const defaultOptions = {
  timeout: 1000 * 30, // 默认超时时间
  baseURL: import.meta.env.VITE_BASE_URL || "", // 请求基地址
  // 跨域
  credentials: "include",
  headers: {}, // 设置headers 必须有
};

// 异常拦截处理器
const errorHandler = (error) => {
  if (error.response) {
    console.log(codeMessage[error.response.status] || "未知错误");
  }
  return Promise.reject(error);
};

// 请求拦截器
const requestInterceptor = (config) => {
  const newConfig = { ...config };

  // 添加基础URL
  newConfig.url = `${defaultOptions.baseURL}${config.url}`;

  // 添加请求你自己的token之类的
  newConfig.headers["client-type"] = "xxxxx";

  newConfig.headers["sign"] = "xxxx";

  newConfig.headers["access-token"] = "xxxx";

  return newConfig;
};

// 响应拦截器
const responseInterceptor = (response) => {
  if (response.ok) {
    return response.json();
  } else {
    throw response;
  }
};

// 创建一个封装后的fetch函数
const fetchWrapper = (url, options = {}) => {
  const config = requestInterceptor({ ...defaultOptions, ...options, url });
  // 设置超时
  const controller = new AbortController();
  const { signal } = controller;
  const timeoutId = setTimeout(() => controller.abort(), config.timeout);

  return fetch(config.url, { ...config, signal })
    .then((response) => {
      clearTimeout(timeoutId);
      return responseInterceptor(response);
    })
    .catch((error) => {
      clearTimeout(timeoutId);
      if (error.name === "AbortError") {
        console.error("请求超时");
      }
      return errorHandler(error);
    });
};

// 创建一个API客户端类
class APIClient {
  get(url, options = {}) {
    return fetchWrapper(url, { ...options, method: "GET" });
  }

  post(url, body, options = {}) {
    return fetchWrapper(url, {
      ...options,
      method: "POST",
      body: JSON.stringify(body),
      headers: { "Content-Type": "application/json;charset=utf-8" },
    });
  }

  upload(url, body, options = {}) {
    return fetchWrapper(url, {
      ...options,
      method: "POST",
      body,
      // 这里千万不能设置headers 否则图片上传会失败
    });
  }

  put(url, body, options = {}) {
    return fetchWrapper(url, {
      ...options,
      method: "PUT",
      body: JSON.stringify(body),
      headers: { "Content-Type": "application/json;charset=utf-8" },
    });
  }

  delete(url, body, options = {}) {
    return fetchWrapper(url, {
      ...options,
      method: "DELETE",
      body: JSON.stringify(body),
      headers: { "Content-Type": "application/json;charset=utf-8" },
    });
  }
}

export default new APIClient();

组件里面使用

import request from "@/utils/request.js";

export function loginApi(data) {
  return request.post("user/v1/login", data);
}

// 测试数据

export function Tektronix20250612getInfo() {
  return request.post("/page/v2025/tek250612/getInfo");
}

// 图片上传

export function uploadImg(data) {
  return request.upload("system/v1/upload/image", data);
}