Nest.js中使用HTTP五種數據傳輸方式小結

更新時間：2023年05月28日 15:40:39 作者：1in

本文主要介紹了Nest.js中使用HTTP五種數據傳輸方式小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

Nest.js作為JS的后端框架，是JS開發(fā)者邁向全棧的不錯選擇，Nest.js也是企業(yè)中最流行的Node框架，它提供了IOC、AOP、微服務等架構特性。
接下來就讓我們認識一下Nest.js在HTTP五種數據傳輸方式中的使用。

Param

param 傳輸方式是通過url的參數傳遞，也是最常見的一種前端向后端傳遞參數的方式。
如果Nest后端接口這樣設置

@Controller('api/parma')
export class ParmaController {
  @Get(':id')
  urlParm(@Param('id') id: string) {
    return `id=${id}`;
  }
}

前端請求這樣請求

axios.get("http://localhost:3000/1in/parma/cdut")

那么，其中的cdut會被當做parma參數被Nest截取，Nest也為我們提供了便捷的@Param裝飾器，使我們可以更便捷的提取param參數。

Query

query傳輸方式也是通過url的參數傳遞，但是他與parma略有不同。query傳輸方式需要做url encode
如果Nest后端接口這樣設置

@Controller('api/query')
export class QueryController { 
    @Get('find') query(@Query('name') name: string, @Query('age') age: number) 
    { return `name=${name},age=${age}`; } }

前端請求這樣請求

axios.get("http://localhost:3000/1in/query/",{
    name:"1in",
    age:20
})

因為axios會自動幫我們url encode，所以我們不需要自己手動url encode，在Nest中，我們通過@Query這個裝飾器來取到query參數。

Form urlencoded

與query不同的是，from urlencoded是通過post請求中的body來傳遞參數，實際上，就是把query的參數放在body中。
需要注意的是我們需要在請求頭中設置'content-type': 'application/x-www-form-urlencoded'。

如果Nest后端接口這樣設置

@Controller('api/form-urlencoded') 
export class FormUrlencodedController { 
    @Post() body(@Body() body)
    { return `${JSON.stringify(body)}` } 
}

前端請求前，我們需要使用qs這個庫來做一下url encode

前端請求這樣請求

axios.post('http://localhost:3000/api/form-urlencoded',
    Qs.stringify({ name: '1in', age: 20 }), 
    { headers: { 'content-type': 'application/x-www-form-urlencoded' } });

在Nest中，我們可以通過@Body這個裝飾器來直接取到body中的內容。

Json

與form urlencoded不同的是，json需要指定的content-type為application/json，也不需要url encode，同樣的也是通過post請求中的Body傳輸數據。

如果Nest后端接口這樣設置

@Controller('api/json')
export class JsonController {
    @Post()
    body(@Body() body) {
    return `received: ${JSON.stringify(createPersonDto)}`
    }
}

前端這樣請求

axios.post("http://localhost:3000/api/json",{
        name:"1in",
        age:20
    })

因為axios會幫我們設置content-type為application/json，所以不需要我們自動設置，Nest同樣也是通過@Body裝飾器取到body中傳輸的數據。

Form data

form data是通過---------作為boundary傳輸的內容，主要用于傳輸文件。

如果Nest后端接口這樣設置

import { AnyFilesInterceptor } from '@nestjs/platform-express';

@Controller('api/form-data')
export class FormDataController {
  @Post('file')
  @UseInterceptors(AnyFilesInterceptor())
  body2(@Body() body, @UploadedFiles() files: Array<Express.Multer.File>) {
    console.log(files);
    return `received: ${JSON.stringify(body)}`
  }
}

前端代碼使用 axios 發(fā)送 post 請求，指定 content type 為 multipart/form-data

前端請求是這樣的

<!DOCTYPE html>
<html lang="en">
<head>
? ? <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head>
<body>
? ? <input id="updateFile" type="file" multiple/>
? ? <script>
? ? ? ? const fileInput = document.querySelector('#updateFile');
? ? ? ? async function formData() {
? ? ? ? ? ? const data = new FormData();
? ? ? ? ? ? data.set('name','1in');
? ? ? ? ? ? data.set('age', 20);
? ? ? ? ? ? data.set('file1', fileInput.files[0]);
? ? ? ? ? ? data.set('file2', fileInput.files[1]);
? ? ? ? ? ? const res = await axios.post('http://localhost:3000/api/form-data/file', data, {
? ? ? ? ? ? ? ? headers: { 'content-type': 'multipart/form-data' }
? ? ? ? ? ? });
? ? ? ? }
? ? ? ? fileInput.onchange = formData;
? ? </script>
</body>
</html>

form data通過 ----- 作為 boundary 分隔的數據。主要用于傳輸文件，在Nest中使用 FilesInterceptor 來處理其中的 binary 字段，用 @UseInterceptors 裝飾器來啟用，其余字段用 @Body 裝飾器來取。axios 發(fā)送請求時，需要設置請求頭，指定 content type為 multipart/form-data，并且用 FormData 對象來封裝傳輸的內容。

到此這篇關于Nest.js中使用HTTP五種數據傳輸方式小結的文章就介紹到這了,更多相關Nest.js HTTP數據傳輸內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: