1、params 传参

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

案例1

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

接口代码：

<code>export function getClueDetail(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

export function getPeopleList(query) {

return request({

url: "/registers/list",

method: "get",

params: query,

});

}

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

2、data 传参

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

案例3

export function postClueCreate(data: clueItem) {

return request<clueItem>({

url: '/clues/create',

method: 'POST',

data: data

})

}

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

3、headers 传参

headers 传参 方式 用的比较少

<code>import axios from 'axios'

import store from '@/store'

const myAxios = axios.create({ -- -->

// 基地址

baseURL: 'http://xxxxxx'

})

const getUserInfoAPI = () => {

return request({

url: '/my/userinfo'

// method不写默认就是'get'方式请求

headers: {

Authorization: store.state.token

}

})

}

案例4 （项目实操案例）

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

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

接口

export function updatePeople(data) {

return request({

url: "/registers/update",

method: "post",

// 从data中取出想要的参数，装入params中

params: {

id: data.id,

},

// data 直接照单全收

data: data,

});

}

地址栏：

参数