【NestJS】HTTP 接口传参的 5 种方式(含前端调用与后端接收)

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

在前后端开发中,HTTP 接口的数据传输方式有多种,常见的有 query、url param、form-urlencoded、form-data、json

作为前端,我们不仅要知道如何调用,还要理解后端如何接收。今天我们用 NestJS 来演示这几种方式。


目录

  • [1. Query 参数](#1. Query 参数)
  • [2. URL Param 参数](#2. URL Param 参数)
  • [3. Form-Urlencoded](#3. Form-Urlencoded)
  • [4. Form-Data](#4. Form-Data)
  • [5. JSON](#5. JSON)
  • 总结

1. Query 参数

参数位置

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

前端调用

javascript 复制代码
// axios 方式
axios.get('/api/person', {
	params: { name: '三十', age: 18 }
});

// 或者直接拼接
axios.get('/api/person?name=三十&age=18');

后端定义

js 复制代码
@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

前端调用

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

后端定义

js 复制代码
@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 等)要放在后面 ,否则静态路由会被动态路由"吃掉"

ts 复制代码
@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

前端调用

js 复制代码
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)

ts 复制代码
// 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

前端调用

js 复制代码
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;

后端定义

ts 复制代码
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

前端调用

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

后端定义(NestJS)

js 复制代码
@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
相关推荐
几个高兴13 小时前
ES6和CommonJS模块区别
前端
渊不语13 小时前
Webpack 深入学习指南
前端·webpack
北京_宏哥13 小时前
《刚刚问世》系列初窥篇-Java+Playwright自动化测试-38-屏幕截图利器-上篇(详细教程)
java·前端·面试
子兮曰13 小时前
🚀别再被JSON.parse坑了!这个深度克隆方案解决了我3年的前端痛点
前端·javascript·全栈
R瑾安13 小时前
VUE基础
前端·javascript·vue.js
无敌爆龙战士13 小时前
一文搞懂pnpm+monorepo的原理
前端
艾小码13 小时前
告别无效加班!这4个表单操作技巧,让你效率翻倍
前端·javascript·html
TimelessHaze13 小时前
面试必备:深入理解 Toast 组件的事件通信与优化实现
前端·trae
zayyo13 小时前
从 Promise 到 Generator,再到 Co 与 Async/Await 的演进
前端·javascript