0


前端传参的三种方式

1、params 传参

参数拼接在地址 url 的后面给后台;地址栏中可见

案例1

地址栏:https://xxxxxxxx/admin/clues/detail?id=558

接口代码:

  1. exportfunctiongetClueDetail(query: any){return request<clueItem>({url:'/clues/detail',method:'get',params: query
  2. })}

对于这个接口而言,query是接口被调用时接收参数的形参;params即是传参方式,而query就是参数,其会自动拼接在请求地址的 url 后面,以问号分隔,数据之间通过&连接;这样我们可以直接在地址栏中看到请求的参数

案例2

地址栏: http://192.168.7.188:3000/registers/list?name=&mobile=&IDNumber=&page=1&perPage=10000

  1. exportfunctiongetPeopleList(query){returnrequest({url:"/registers/list",method:"get",params: query,});}

在本接口中 query 中就是查询参数,其中包含了很多个参数;

2、data 传参

使用 data 传参,其会把数据拼接在请求体里 (body参数);地址栏中看不到请求参数

案例3

  1. exportfunctionpostClueCreate(data: clueItem){return request<clueItem>({url:'/clues/create',method:'POST',data: data
  2. })}

在控制台中可以打印出来(这里不仅可以展示 data传参中的参数,也可以展示params传参中的参数)

image-20240514113243456

3、headers 传参

headers 传参 方式 用的比较少

  1. import axios from'axios'import store from'@/store'const myAxios = axios.create({// 基地址baseURL:'http://xxxxxx'})constgetUserInfoAPI=()=>{returnrequest({url:'/my/userinfo'// method不写默认就是'get'方式请求headers:{Authorization: store.state.token
  2. }})}

案例4 (项目实操案例)

一个接口 同时使用 params和data 这两种传参方式

params的参数会拼接在地址栏中,而data中的参数会拼接在请求体body中,可以在控制台看到二者

接口

  1. exportfunctionupdatePeople(data){returnrequest({url:"/registers/update",method:"post",// 从data中取出想要的参数,装入params中params:{id: data.id,},// data 直接照单全收data: data,});}

地址栏:

image-20240514114636860

参数
image-20240514114613009

标签: vue.js javascript

本文转载自: https://blog.csdn.net/qq_64760783/article/details/139067377
版权归原作者 发渐稀 所有, 如有侵权,请联系我们删除。

“前端传参的三种方式”的评论:

还没有评论