前后端数据请求

post 请求三种格式：

application/x-www-form-urlencoded

//有兼容性问题
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

//qs 插件
const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

//es6 方式
import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

application/json

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

multipart/form-data（文件上传）

const params = new FormData();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

get 请求四种格式：

基本的 GET 请求

// 引入 axios
const axios = require('axios');

// 发起 GET 请求
axios.get('https://api.example.com/data')
  .then(response => {
    // 请求成功处理
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败处理
    console.error(error);
  });

带参数的 GET 请求（直接拼接在 URL 上）(query)

const axios = require('axios');

// 假设有两个参数：id 和 category
const id = 123;
const category = 'electronics';

// 使用模板字符串将参数拼接在 URL 上
axios.get(`https://api.example.com/data?id=${id}&category=${category}`)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

带参数的 GET 请求（使用 params 对象）

const axios = require('axios');

// 定义 params 对象
const params = {
  id: 123,
  category: 'electronics'
};

// 将 params 对象传递给 GET 请求
axios.get('https://api.example.com/data', { params })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

RESTful 风格的 GET 请求（params）

const axios = require('axios');

// 假设需要获取 id 为 123 的商品信息
const productId = 123;

// 使用 RESTful 风格传递参数
axios.get(`https://api.example.com/products/${productId}`)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

params 和 query 区别与联系

1. 参数用途：

• • “params”（路径参数）用于指定路由的一部分，通常用于标识特定资源。例如，在RESTful API中，可以使用路径参数指定要操作的资源ID，如/users/{id}，其中{id}就是一个路径参数。
  • “query”（查询参数）用于向服务器请求附加信息。查询参数以键值对的形式出现在URL的问号之后，例如：https://example.com/search?query=example，其中query=example就是一个查询参数。

2. 参数传递方式：

• • “params”参数通过URL路径的一部分传递。例如，如果要请求用户名为”john”的用户信息，可以使用路径参数的方式：/users/john。
  • “query”参数以键值对的形式出现在URL的查询字符串中。例如，要搜索关键字为”example”的产品，可以使用查询参数的方式：/products?search=example。

总体来说，两者都是用于向服务器传递参数，但使用的方式和场景略有不同。选择何种方式取决于你的具体需求和项目约定。如果要标识特定资源，通常使用”params”；如果要传递附加信息或进行搜索过滤，通常使用”query”。需要注意的是，不同的后端框架和语言可能对这两种方式有不同的实现方式和约定。

3. 使用场景

“params”（路径参数）的使用场景：

• 标识资源：当需要在URL中标识特定资源时，可以使用路径参数。例如，在一个博客应用中，使用路径参数来指定文章ID：/articles/{id}，其中{id}就是路径参数。
• RESTful API：在设计RESTful API时，路径参数常用于指定特定资源的操作。例如，GET /users/{id}可以获取特定用户的信息。

“query”（查询参数）的使用场景：

• 附加信息：当需要向服务器传递附加信息时，可以使用查询参数。例如，在一个电子商务网站中，需要***向服务器传递用户的搜索关键字来获取相应产品列表***，可以使用查询参数：/products?search=keyword。
• 过滤和排序：查询参数还常用于过滤和排序结果。比如，对于商品列表页面，可以使用查询参数来指定排序方式、过滤条件等：/products?sort=price&category=electronics。

路径参数用于直接标识资源或操作，而查询参数则用于传递附加信息、过滤和排序结果等。根据具体需求和项目约定，选择适合的参数传递方式以实现预期功能。