对接后端接口各个请求的参数整理

1. get请求

一般用于请求列表或者详情等接口

声明接口

1. 可以直接拼接参数

http://localhost:8090/api/user/1

// 获取系统用户详情
export function getUserDetailApi(id) {
  return request({
    url: `/system/user/${id}`,
    method: 'get',
  })
}

2. url后面如果还有其他参数也可自行拼接

http://localhost:8090/api/user/1?search=1

// 获取系统用户详情
export function getUserDetailApi(data) {
  return request({
    url: `/system/user/${data.id}?search=${data.search}`,
    method: 'get',
  })
}

3. 利用params自动拼接参数

http://localhost:8090/api/user/list?year=2024&month=12

const params = {
        year: '2024',
        month: '12'
      }
getUserDetailApi(params).then().catch()

// 获取系统用户列表
export function getUserDetailApi(data) {
  return request({
    url: `/system/user/list`,
    method: 'get',
    params: data
  })
}

2. post请求

一般用于创建接口，当然编辑也可以使用，还有一些列表也会用post请求

1. 最常见的body传参

// 新增用户列表
export function addUserApi(data) {
  return request({
    url: `/system/user/add`,
    method: 'post',
    data: data
  })
}

const params = {
        name: '小明',
        age: 12
      }
addUserApi(params).then().catch()

http://localhost:8090/api/user/add
Request Payload
{
    name: '小明',
    age: 12
}

2. Form Data传参

// 新增用户列表
export function addUserApi(data) {
  return request({
    url: `/system/user/add`,
    method: 'post',
    data: data
  })
}

let params = new FormData()
params.append('name', '小明')
params.append('age', '12')
addUserApi(params).then().catch()

http://localhost:8090/api/user/add
Form Data
  name: 小明,
  age: 12

3. put请求

一般应用于编辑接口

// 编辑用户列表
export function editUserApi(data) {
  return request({
    url: `/system/user/edit/${data.id}`,
    method: 'put',
    data: data
  })
}

const params = {
        id: 1
        name: '小明',
        age: 12
      }
editUserApi(params).then().catch()

http://localhost:8090/api/user/edit/1
Request Payload
{
    name: '小明',
    age: 12
}

4. delete请求

一般应用于删除数据的接口

1. 删除一条数据

// 编辑用户列表
export function deleteUserApi(id) {
  return request({
    url: `/system/user/delete/${id}`,
    method: 'delete'
  })
}

const id = 1
deleteUserApi(id).then().catch()

http://localhost:8090/api/user/delete/1

2. 删除多条数据

// 编辑用户列表
export function deleteUserApi(ids) {
  return request({
    url: `/system/user/delete/${ids}`,
    method: 'delete'
  })
}

const list = [1,2,3,4]
const listStr = list.join(',')
deleteUserApi(listStr).then().catch()

http://localhost:8090/api/user/delete/1,2,3,4

总结

对于常规请求没啥要说的，很简单，直接用就可以了，唯一需要注意的就是不常用的 Form Data传参，一般很少用，后端同学如果要你这么传参，只要记住它，就不需要每次都去百度了！