当前位置: 首页 > news >正文

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 上。
    • 例如:
      axios.get('/user', {params: {name: 'Kimi',age: 30}
      });
      
    • 这将生成一个带有查询参数的请求:/user?name=Kimi&age=30
  3. params 配置项

    • params 配置项还可以接受一个函数,这个函数会被调用以序列化参数。
    • 例如:
      axios.get('/user', {params: {name: 'Kimi',age: 30,// 使用函数来自定义参数序列化paramsSerializer: function(params) {return Qs.stringify(params, {arrayFormat: 'brackets'});}}
      });
      
    • 这可以用于更复杂的参数序列化需求。

POST 请求携带参数

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

  1. 直接在 data 中传递参数

    • 发送 POST 请求时,可以直接将参数作为对象传递给 data 配置项。
    • 例如:
      axios.post('/user', {name: 'Kimi',age: 30
      });
      
    • Axios 会自动将对象序列化为 JSON 字符串,并设置 Content-Type 头部为 application/json
  2. 使用 FormData

    • 如果需要发送表单数据,可以使用 FormData 对象,并将其传递给 data 配置项。
    • 例如:
      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 配置项来修改请求数据的格式。
    • 例如:
      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 提供了灵活的配置项来满足不同的参数传递需求。

http://www.lryc.cn/news/501387.html

相关文章:

  • Vue前端开发-路由其他配置
  • 框架建设实战7——定时任务组件
  • mybatis 整合 ehcache
  • 【PlantUML系列】用例图(三)
  • 发送请求时遇到了数据库完整性约束错误 1048 Column ‘platform‘ cannot be null
  • 三菱FX3U模拟量产品的介绍
  • pdf转图片
  • Go 协程上下文切换的代价
  • HTTP 持久连接(长连接)
  • 12月10日IO
  • Composite Pattern
  • Springboot MVC
  • MySQL数据表记录增操作
  • maven报错“找不到符号“
  • python进阶-05-利用Selenium来实现动态爬虫
  • P1226 【模板】快速幂
  • 【C++】求第二大的数详细解析
  • 从零开始学TiDB(3)TiKV 持久化机制
  • Elasticsearch+Kibana+IK分词器+拼音分词器安装
  • 子网划分实例
  • 上海亚商投顾:创业板指震荡调整 机器人概念股再度爆发
  • 【C++ 20进阶(2):初始化 Initializer
  • 【重生之我在B站学MySQL】
  • Python实现中国象棋
  • LBS 开发微课堂|通过openGL ES轻松实现建筑物渲染及动画
  • map1[item.id]和map1.get(item.id)的区别为何前者取出的是空,后者取出的是正确的值
  • window端sqlplus连接linux_oracle11g
  • Go支付中台方案:多平台兼容与多项目对接
  • MySQL触发器的使用详解
  • 关于NLP交互式系统的一些基础入门