axios的get和post请求,关于携带参数相关的讲解一下

在使用 Axios 发送 HTTP 请求时,GET 和 POST 请求携带参数的方式有所不同。以下是关于这两种请求方法携带参数的详细讲解:

GET 请求携带参数

对于 GET 请求,参数通常附加在 URL 之后,以查询字符串的形式传递。

  1. 直接在 URL 中拼接参数:

    • 可以直接将参数以键值对的形式拼接在 URL 后面。
    • 例如:axios.get('/user?name=Kimi&age=30')。
  2. 使用 params 参数:

    • Axios 允许你通过 params 配置项传递一个对象,Axios 会自动将对象序列化为查询字符串并附加到 URL 上。

    • 例如:

      javascript 复制代码
      axios.get('/user', {
        params: {
          name: 'Kimi',
          age: 30
        }
      });
    • 这将生成一个带有查询参数的请求:/user?name=Kimi&age=30。

  3. params 配置项:

    • params 配置项还可以接受一个函数,这个函数会被调用以序列化参数。

    • 例如:

      javascript 复制代码
      axios.get('/user', {
        params: {
          name: 'Kimi',
          age: 30,
          // 使用函数来自定义参数序列化
          paramsSerializer: function(params) {
            return Qs.stringify(params, {arrayFormat: 'brackets'});
          }
        }
      });
    • 这可以用于更复杂的参数序列化需求。

POST 请求携带参数

对于 POST 请求,参数通常包含在请求体中。

  1. 直接在 data 中传递参数:

    • 发送 POST 请求时,可以直接将参数作为对象传递给 data 配置项。

    • 例如:

      javascript 复制代码
      axios.post('/user', {
        name: 'Kimi',
        age: 30
      });
    • Axios 会自动将对象序列化为 JSON 字符串,并设置 Content-Type 头部为 application/json。

  2. 使用 FormData:

    • 如果需要发送表单数据,可以使用 FormData 对象,并将其传递给 data 配置项。

    • 例如:

      javascript 复制代码
      let formData = new FormData();
      formData.append('name', 'Kimi');
      formData.append('age', '30');
      axios.post('/user', formData);
    • 这将使用 multipart/form-data 编码发送表单数据。

  3. 自定义 Content-Type:

    • 如果需要发送其他类型的数据(如 application/x-www-form-urlencoded),可以自定义 transformRequest 配置项来修改请求数据的格式。

    • 例如:

      javascript 复制代码
      axios.post('/user', {
        name: 'Kimi',
        age: 30
      }, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        transformRequest: [
          function (data) {
            let ret = '';
            for (let it in data) {
              ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            return ret;
          }
        ]
      });
    • 这将把 JSON 对象转换为 application/x-www-form-urlencoded 格式的字符串。

总结来说,GET 请求通常将参数附加在 URL 上,而 POST 请求将参数放在请求体中。Axios 提供了灵活的配置项来满足不同的参数传递需求。

相关推荐
小大宇8 小时前
Vue知识点6-computed计算属性
前端·javascript·vue.js
程序员海军8 小时前
尤雨溪 : Vue 4 已经在规划中了!
前端·javascript·vue.js
徐小夕12 小时前
doc2docx方案,开源!
前端·vue.js·github
徐小夕12 小时前
JitOFD:一款面向信创与档案场景的 Web 端 OFD 编辑器
前端·vue.js·github
星光开发者13 小时前
基于springboot智慧草场牛羊管理系统-计算机毕设【课程设计】50360
vue.js·spring boot·后端·mysql·php·课程设计·express
橘猫走江湖14 小时前
Vue 3 虚拟 DOM:作用、触发机制,以及怎样变成页面上的真实节点
前端·vue.js·dom
weixin_BYSJ198714 小时前
电竞先锋网站---附源码02032
java·vue.js·spring boot·python·django·tomcat·php
小大宇18 小时前
vue知识点9-标签上的ref
前端·javascript·vue.js
Java后端的Ai之路18 小时前
【AIAgent项目-AI生成PPT-09】灵活排版
前端·vue.js·人工智能·python·powerpoint
jaysee-sjc19 小时前
【苍穹外卖】Day10:定时任务与 WebSocket 实时提醒实战
java·开发语言·javascript·数据库·vue.js·websocket·网络协议