前端发送请求时，尤其是用 Axios 这类库时，经常会遇到 params 和 data 两个参数，它们的区别主要体现在请求类型和参数传递位置上：

1. params

• 作用：用于 GET 请求时，传递的 URL 查询参数（Query String）。
• 表现形式：参数会被拼接到 URL 末尾，如 ?key1=value1&key2=value2。
• 使用场景：GET 请求获取数据时，通过 URL 传参。

axios.get('/api/user', {
  params: { id: 123, name: 'Alice' }
});
// 发送请求 URL: /api/user?id=123&name=Alice

2. data

• 作用：用于 POST、PUT、PATCH 等请求的请求体（Request Body）中传递参数。
• 表现形式：参数放在请求体中，不显示在 URL。
• 使用场景：提交数据给服务器，比如表单数据、JSON 等。

axios.post('/api/user', {
  data: { id: 123, name: 'Alice' }
});

// 正确用法其实是：
axios.post('/api/user', {
  id: 123,
  name: 'Alice'
});

注意：Axios post 请求的第二个参数就是请求体数据，不需要写 data 字段，直接传对象即可。

总结

补充说明

• 浏览器的 GET 请求一般不会有请求体，参数只能通过 URL 传递（即 params）。
• POST 请求常用 data 来传递数据。
• 如果手写 fetch，要分别设置 URL 参数和请求体。
• 其他请求类型也类似根据需求选择。

好的！下面给你两个完整示例，一个用 Axios，一个用 fetch，演示如何正确使用 params 和 data（请求体）发送请求。

Axios 请求示例

import axios from 'axios';

// 1. GET 请求，使用 params 传递查询参数
axios.get('/api/users', {
  params: {
    id: 123,
    name: 'Alice'
  }
})
.then(response => {
  console.log('GET 响应数据:', response.data);
})
.catch(error => {
  console.error('GET 请求错误:', error);
});

// 2. POST 请求，使用请求体传递数据（data）
axios.post('/api/users', {
  id: 123,
  name: 'Alice'
})
.then(response => {
  console.log('POST 响应数据:', response.data);
})
.catch(error => {
  console.error('POST 请求错误:', error);
});

fetch 请求示例

// 1. GET 请求，参数拼接到 URL
const params = new URLSearchParams({ id: 123, name: 'Alice' }).toString();
fetch(`/api/users?${params}`, {
  method: 'GET'
})
.then(response => response.json())
.then(data => {
  console.log('GET 响应数据:', data);
})
.catch(error => {
  console.error('GET 请求错误:', error);
});

// 2. POST 请求，参数放到请求体中
fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    id: 123,
    name: 'Alice'
  })
})
.then(response => response.json())
.then(data => {
  console.log('POST 响应数据:', data);
})
.catch(error => {
  console.error('POST 请求错误:', error);
});

说明

• Axios 的 params 会自动帮你拼接 URL 查询字符串，data 会作为请求体发送。
• fetch 需要你手动拼接 URL（GET）和手动设置请求体、请求头（POST）。

明白了！这里给你一个基于 Axios 的通用请求封装函数，支持 GET/POST 自动处理 params 和 data，方便你在 Vue、React 或纯 JS 项目中复用。

import axios from 'axios';

/**
 * 通用请求函数
 * @param {string} url 请求地址
 * @param {'GET'|'POST'|'PUT'|'DELETE'} method 请求方法，默认GET
 * @param {object} params URL 查询参数（GET 时有效）
 * @param {object} data 请求体参数（POST/PUT 时有效）
 * @param {object} headers 自定义请求头
 * @returns {Promise} axios 返回的 Promise
 */
function request({ url, method = 'GET', params = {}, data = {}, headers = {} }) {
  method = method.toUpperCase();

  const config = {
    url,
    method,
    headers,
  };

  if (method === 'GET' || method === 'DELETE') {
    config.params = params;
  } else {
    config.data = data;
    config.params = params; // 可选，如果想同时带查询参数也支持
  }

  return axios(config)
    .then(res => res.data)
    .catch(err => {
      console.error(`[${method}] 请求错误：`, err);
      throw err;
    });
}

export default request;

使用示例

import request from './request';

// GET 请求示例
request({
  url: '/api/users',
  method: 'GET',
  params: { id: 123 }
}).then(data => console.log('GET 返回数据:', data));

// POST 请求示例
request({
  url: '/api/users',
  method: 'POST',
  data: { name: 'Alice', age: 25 }
}).then(data => console.log('POST 返回数据:', data));