网站导航
> 技术文档 > 【HTTP请求】前端HTTP请求，常见get、post接口类型和body、query参数类型，常见传参组合、搭配的函数定义和实际接口（基于axios或request）_请求类型query

【HTTP请求】前端HTTP请求，常见get、post接口类型和body、query参数类型，常见传参组合、搭配的函数定义和实际接口（基于axios或request）_请求类型query

网友: 技术文档 2025-07-30 20:13:56

目录

    • 前言
    • 一、接口类型和参数类型
      • （1）接口类型（HTTP Methods）:
      • （2）参数类型:
    • 二、常见搭配及示例写法
      • ✔️基于request
        • （1）GET 请求 + Path参数:
        • （2）GET 请求 + Query 参数:
        • （3）POST 请求 + Body参数:
        • （4）PUT 请求 + Path 参数和Body参数:
        • （5）DELETE请求 + Path 参数:
        • （6）PATCH 请求 + Path 参数和Body参数:
      • ✔️基于axios
        • （1）GET 请求 + Path参数:
        • （2）GET 请求 + Query参数:
        • （3）POST 请求 + Body参数:
        • （4）PUT 请求 + Path参数和Body参数:
        • （5）DELETE请求 + Path参数:
        • （6）PATCH 请求 + Path参数和Body参数:
      • ✔️简述

前言

前端对接后端接口时，后端提供了接口类型和参数类型，可以参考本文章分类在.js文件里写http请求，包括常见get、post接口类型和body、query参数类型等，基于axios或request。

注： get请求基本不会搭配body参数，但是接口软件可以跑通如apipost等，代码里比较难通，请及时和后端反馈。

一、接口类型和参数类型

（1）接口类型（HTTP Methods）:

  • GET - 获取资源
  • POST - 创建资源
  • PUT - 更新资源
  • DELETE - 删除资源
  • PATCH - 部分更新资源
  • OPTIONS - 获取资源支持的HTTP方法

（2）参数类型:

  • Path Parameters - 通常用于标识资源，嵌入在URL中
  • Query Parameters - 通常用于过滤、排序或搜索资源，跟在URL后面以?开始，用&连接
  • Request Body - 通常用于发送数据给服务器，如JSON或XML格式的数据

二、常见搭配及示例写法

✔️基于request

（1）GET 请求 + Path参数:
export function getSingleResource(id) { return request({ url: `/api/resource/${id}`, method: \'get\' });}
  • 🎈实际接口：
http://localhost:8080/api/resource/123
（2）GET 请求 + Query 参数:
  • 🎈函数定义：
export function getListResources(queryParams) { return request({ url: \'/api/resources\', method: \'get\', params: queryParams });}
  • 🎈实际接口：
http://localhost:8080/api/resource?limit=10&offset=20
  • 🎈查询参数：
queryParams: { limit: 10, offset: 20, }
（3）POST 请求 + Body参数:
  • 🎈函数定义：
export function createResource(data) { return request({ url: \'/api/resource\', method: \'post\', data: data });}
  • 🎈实际接口：
http://localhost:8080/api/resource
  • 🎈请求体（JSON格式）：
{ \"name\": \"New Resource\", \"description\": \"This is a new resource.\" \"number\": 100}
（4）PUT 请求 + Path 参数和Body参数:
  • 🎈函数定义：
export function updateResource(id, data) { return request({ url: `/api/resource/${id}`, method: \'put\', data: data });}
  • 🎈实际接口：
http://localhost:8080/api/resource/123
  • 🎈请求体（JSON格式）：
{ \"name\": \"Updated Resource\", \"description\": \"This resource has been updated.\" \"number\": 100}
（5）DELETE请求 + Path 参数:
  • 🎈函数定义：
export function deleteResource(id) { return request({ url: `/api/resource/${id}`, method: \'delete\' });}
  • 🎈实际接口：
http://localhost:8080/api/resource/123
（6）PATCH 请求 + Path 参数和Body参数:
  • 🎈函数定义：
export function patchResource(id, data) { return request({ url: `/api/resource/${id}`, method: \'patch\', data: data });}
  • 🎈实际接口：
http://localhost:8080/api/resource/123
  • 🎈请求体（JSON格式）：
{ \"description\": \"This is a partial update to the resource.\" \"number\": 100}

✔️基于axios

（1）GET 请求 + Path参数:
  • 🎈函数定义：
export function getSingleResourceAxios(id) { return axios.get(`/api/resource/${id}`);}
  • 🎈实际接口：
http://localhost:8080/api/resource/123
（2）GET 请求 + Query参数:
  • 🎈函数定义：
export function getResourcesAxios(params) { return axios.get(\'/api/resource\', { params });}
  • 🎈实际接口：
http://localhost:8080/api/resource?limit=10&offset=20
  • 🎈查询参数：
params : { limit: 10, offset: 20, }
（3）POST 请求 + Body参数:
  • 🎈函数定义：
export function createResourceAxios(data) { return axios.post(\'/api/resource\', data);}
  • 🎈实际接口：
http://localhost:8080/api/resource
  • 🎈请求体（JSON格式）：
{ \"name\": \"New Resource\", \"description\": \"This is a new resource.\" \"number\": 100}
（4）PUT 请求 + Path参数和Body参数:
  • 🎈函数定义：
export function updateResourceAxios(id, data) { return axios.put(`/api/resource/${id}`, data);}
  • 🎈实际接口：
http://localhost:8080/api/resource/123
  • 🎈请求体（JSON格式）：
{ \"description\": \"Updated description.\" \"number\": 100}
（5）DELETE请求 + Path参数:
  • 🎈函数定义：
export function deleteResourceAxios(id) { return axios.delete(`/api/resource/${id}`);}
  • 🎈实际接口：
http://localhost:8080/api/resource/123
（6）PATCH 请求 + Path参数和Body参数:
  • 🎈函数定义：
export function patchResourceAxios(id, data) { return axios.patch(`/api/resource/${id}`, data);}
  • 🎈实际接口：
http://localhost:8080/api/resource/123
  • 🎈请求体（JSON格式）：
{ \"description\": \"This is a partial update to the resource.\" \"number\": 100}

✔️简述

  • 在这些示例中，id 是路径参数，用于指定特定的资源。data 是请求体，包含要发送到服务器的数据。在axios中，params 属性用于传递查询参数，而 data 属性用于传递请求体。

QQ免费资源

网络标签：

相关问题