1、params 传参
参数拼接在地址 url 的后面给后台;地址栏中可见
案例1
地址栏:https://xxxxxxxx/admin/clues/detail?id=558
接口代码:
exportfunctiongetClueDetail(query: any){return request<clueItem>({url:'/clues/detail',method:'get',params: query
})}
对于这个接口而言,query是接口被调用时接收参数的形参;params即是传参方式,而query就是参数,其会自动拼接在请求地址的 url 后面,以问号分隔,数据之间通过&连接;这样我们可以直接在地址栏中看到请求的参数
案例2
地址栏: http://192.168.7.188:3000/registers/list?name=&mobile=&IDNumber=&page=1&perPage=10000
exportfunctiongetPeopleList(query){returnrequest({url:"/registers/list",method:"get",params: query,});}
在本接口中 query 中就是查询参数,其中包含了很多个参数;
2、data 传参
使用 data 传参,其会把数据拼接在请求体里 (body参数);地址栏中看不到请求参数
案例3
exportfunctionpostClueCreate(data: clueItem){return request<clueItem>({url:'/clues/create',method:'POST',data: data
})}
在控制台中可以打印出来(这里不仅可以展示 data传参中的参数,也可以展示params传参中的参数)
3、headers 传参
headers 传参 方式 用的比较少
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
}})}
案例4 (项目实操案例)
一个接口 同时使用 params和data 这两种传参方式
params的参数会拼接在地址栏中,而data中的参数会拼接在请求体body中,可以在控制台看到二者
接口
exportfunctionupdatePeople(data){returnrequest({url:"/registers/update",method:"post",// 从data中取出想要的参数,装入params中params:{id: data.id,},// data 直接照单全收data: data,});}
地址栏:
参数
版权归原作者 发渐稀 所有, 如有侵权,请联系我们删除。