NestJS 开发必备:HTTP 接口传参的 5 种方式总结与实战

【NestJS】HTTP 接口传参的 5 种方式

在前后端开发中,HTTP 接口的数据传输方式有多种,常见的有 query、url param、form-urlencoded、form-data、json 。 作为前端,我们不仅要知道如何调用,还要理解后端如何接收。今天我们用 NestJS 来演示这几种方式。


目录

  • [1. Query 参数](#1. Query 参数 "#1-query-%E5%8F%82%E6%95%B0")
  • [2. URL Param 参数](#2. URL Param 参数 "#2-url-param-%E5%8F%82%E6%95%B0")
  • [3. Form-Urlencoded](#3. Form-Urlencoded "#3-form-urlencoded")
  • [4. Form-Data](#4. Form-Data "#4-form-data")
  • [5. JSON](#5. JSON "#5-json")
  • 总结

1. Query 参数

参数位置

  • 写在 URL ? 后面 ,多个参数用 & 分隔
  • 例如: GET /person?name=三十&age=18

前端调用

csharp 复制代码
// axios 方式
axios.get('/api/person', {
  params: { name: '三十', age: 18 }
});
​
// 或者直接拼接
axios.get('/api/person?name=三十&age=18');

后端定义

less 复制代码
@Controller('api/person')
export class PersonController {
  @Get('/query')
  queryHandle(@Query('name') name: string, @Query('age') age: number) {
    return `[三十] queryHandle received name=${name}, age=${age}`;
  }
}

2. URL Param 参数

参数位置

  • 直接放在 URL 路径中
  • 例如:GET /person/18

前端调用

csharp 复制代码
axios.get('/api/person/18');

后端定义

less 复制代码
@Controller('api/person')
export class PersonController {
  @Get(':id') // 声明参数,定义多个参数: @Get(':id/:age/:name')
  urlParamHandle(@Param('id') id: string) { // @Param() 装饰器,取出参数注入到 Controller 方法中
    return `[三十] urlParamHandle received id=${id}`;
  }
}

注意点: 静态路由和动态路由定义顺序

静态路由(find、list、detail 等)要放在前面, 动态路由(:id、:slug 等)要放在后面 ,否则静态路由会被动态路由"吃掉"

kotlin 复制代码
@Controller('api/person')
export class PersonController {
    @Get('find') // 静态路由
    findAll() {
      return 'find all';
    }
    
    @Get(':id') // 动态路由
    getById(@Param('id') id: string) {
      return { id };
    }
}

3. Form-Urlencoded

参数位置

  • 写在 body 里 ,格式类似 name=三十&age=18

    非英文字符和其他需要编码的字符可以通过 encodeURIComponent('三十') 编码或使用 query-string npm 包处理

  • Content-Type: application/x-www-form-urlencoded

前端调用

php 复制代码
import qs from 'qs';
​
const res = await axios.post('/api/person', qs.stringify({
    name: '三十',
    age: 18
  }), {
    headers: { 'content-type': 'application/x-www-form-urlencoded' }
  });

后端定义(NestJS)

less 复制代码
// dto 是 data transfer object,用于封装传输的数据的对象
class CreatePersonDto {
  name: string;
  age: number;
}
​
@Controller('api/person')
export class PersonController {
  @Post()
  formUrlEncodedHandle(@Body() createPersonDto: CreatePersonDto) { // 使用 @Body 装饰器,Nest 会解析请求体,然后注入到 dto 中。
    return `[三十] formUrlEncodedHandle received ${JSON.stringify(createPersonDto)}`
  }
}

4. Form-Data

参数位置

  • 也是写在 body 中

  • 使用 boundary 分隔,支持上传 文件

  • Content-Type: multipart/form-data

前端调用

kotlin 复制代码
import axios from 'axios'
const fileInput = document.querySelector('#fileInput');
​
async function formData() {
  const data = new FormData();
  data.set('name','三十');
  data.set('age', 18);
  data.set('file1', fileInput.files[0]);
  data.set('file2', fileInput.files[1]);
​
  axios.post('/api/person/file', data, {
    headers: { 'content-type': 'multipart/form-data' }
  });
}
​
fileInput.onchange = formData;

后端定义

less 复制代码
import {
  Body,
  UseInterceptors,
  UploadedFiles,
} from '@nestjs/common';
import { PersonService } from './person.service';
import { AnyFilesInterceptor } from '@nestjs/platform-express';
​
@Controller('api/person')
export class PersonController {
  @Post('file')
  @UseInterceptors(
    AnyFilesInterceptor({
      dest: 'upload/', // 默认上传文件存放的目录
    }),
  )
  formDataHandle(
    @Body() createPersonDto: CreatePersonDto,
    @UploadedFiles() files: Array<Express.Multer.File>,
  ) {
    console.log(files);
    return `[三十] formDataHandle received ${JSON.stringify(createPersonDto)}`;
  }
}

5. JSON

参数位置

  • 写在 body 中
  • Content-Type: application/json

前端调用

php 复制代码
axios.post('/api/person', {
  name: '三十',
  age: 18
});

后端定义(NestJS)

less 复制代码
@Controller('api/person')
export class PersonController {
  @Post()
  applicationJsonHandle(@Body() createPersonDto: CreatePersonDto) {
    return `[三十] applicationJsonHandle received ${JSON.stringify(createPersonDto)}`;
  }
}

总结

方式 参数位置 Content-Type 前端调用示例 NestJS 装饰器
Query URL ? 后面 无需特殊设置 axios.get('/api?x=1') @Query
URL Param URL 路径 无需特殊设置 axios.get('/api/1') @Param
Form-Urlencoded body(字符串) application/x-www-form-urlencoded axios.post(url, qs.stringify()) @Body
Form-Data body(分隔符) multipart/form-data axios.post(url, formData) @Body + @UploadedFile
JSON body(JSON) application/json axios.post(url, { obj }) @Body
相关推荐
coding随想5 小时前
揭秘常见的摇一摇抽奖功能:深度解析HTML5 devicemotion事件的原理与实战技巧!
前端
用户4099322502125 小时前
测试覆盖率不够高?这些技巧让你的FastAPI测试无懈可击!
后端·ai编程·trae
用户6757049885025 小时前
看到了 SQL 中 order by 3 desc,1 直接愣了一下。知道原因后,直接想骂人!
后端
dylan_QAQ5 小时前
Java转Go全过程02-面向对象编程部分
java·后端·go
天才首富科学家5 小时前
后端(15)-微信支付后的notify回调收不到
spring boot·后端
zjjuejin5 小时前
Dockerfile 指令全解析:从基础到高阶实践
后端·docker
Cache技术分享5 小时前
178. Java 包
前端·javascript·后端
小小小怪兽5 小时前
基于人工智能的表单开发-另一种角度的低代码
前端
阴晦5 小时前
llm与RAG的学习与优化
后端