nestjs学习9：装饰器

一江东流水
38 阅读7分钟

Nest 的功能都是大多通过装饰器来使用的，本文把所有的装饰器过一遍。文章来源自神光的付费文章，搬迁到这里只是为了自己复习。

@Module @Controller @Injectable @Inject @Optional @Global @SetMetadata

Nest 提供了一套模块系统，通过 @Module声明模块：

image.png

通过 @Controller、@Injectable 分别声明其中的 controller 和 provider：

image.png

image.png

这个 provider 可以是任何的 class，不一定非要是service，我们可以自定义任何一个类作为provider：

image.png

注入的方式可以是构造器注入和属性注入：

image.png

image.png

属性注入要指定注入的 token，可能是 class 也可能是 string。

你可以通过 useFactory、useValue 等方式声明 provider：

image.png

这时候也需要通过 @Inject 指定注入的 token：

image.png

这些注入的依赖如果没有的话，创建对象时会报错。但如果它是可选的，你可以用 @Optional 声明一下，这样没有对应的 provider 也能正常创建这个对象。

image.png

如果模块被很多地方都引用，为了方便，可以用 @Global 把它声明为全局的，这样它 exports 的 provider 就可以直接注入了：

image.png

handler 和 class 可以通过 @SetMetadata 指定 metadata：

image.png

然后在 guard 或者 interceptor 里取出来：

image.png

@Query @Param @Body @Headers @Ip @Session @HostParam @Req

这里的 @Query 是取 url 后的 ?bbb=true，而 @Param 是取路径中的参数，比如 /xxx/111 种的 111。

image.png

此外，如果是 @Post 请求，可以通过 @Body 取到 body 部分：

image.png

你可以通过 @Headers 装饰器取某个请求头 或者全部请求头：

image.png

image.png

通过 @Ip 拿到请求的 ip：

image.png

通过 @Session 拿到 session 对象：

image.png

但要使用 session 需要安装一个 express 中间件：

npm install express-session

@HostParam 用于取域名部分的参数：

这样指定 controller 的生效路径：

import { Controller, Get, HostParam } from '@nestjs/common';

@Controller({ host: ':host.0.0.1', path: 'aaa' })
export class AaaController {
    @Get('bbb')
    hello() {
        return 'hello';
    }
}

controller 除了可以指定某些 path 生效外，还可以指定 host。

这时候你会发现只有 host 满足 xx.0.0.1 的时候才会路由到这个 controller。

host 里的参数就可以通过 @HostParam 取出来：

import { Controller, Get, HostParam } from '@nestjs/common';

@Controller({ host: ':host.0.0.1', path: 'aaa' })
export class AaaController {
    @Get('bbb')
    hello(@HostParam('host') host) {
        return host;
    }
}

前面取的这些都是 request 里的属性，当然也可以直接注入 request 对象：

image.png

通过 @Req 或者 @Request 装饰器，这俩是同一个东西：

image.png

注入 request 对象后，可以手动取任何参数。

@Res @HttpCode @Redirect @Render

当然，也可以 @Res 或者 @Response 注入 response 对象，只不过 response 对象有点特殊：

image.png

当你注入 response 对象之后，服务器会一直没有响应：

image.png

因为这时候 Nest 就不会再把 handler 返回值作为响应内容了。

你可以自己返回响应：

image.png

Nest 这么设计是为了避免你自己返回的响应和 Nest 返回的响应的冲突。

如果你不会自己返回响应，可以通过 passthrough 参数告诉 Nest：

image.png

除了注入 @Res 不会返回响应外，注入 @Next 也不会：

handler 默认返回的是 200 的状态码，你可以通过 @HttpCode 修改它：

image.png

image.png

此外，你还可以通过 @Redirect 装饰器来指定路由重定向的 url：

image.png

d563d9e5836f49038f9ad7db40702f85~tplv-k3u1fbpfcp-jj-mark_1512_0_0_0_q75.awebp

或者在返回值的地方设置 url：

@Get('xxx')
@Redirect()
async jump() {
    return {
      url: 'https://www.baidu.com',
      statusCode: 302
    }  
}

301 和 302 的区别：

访问阶段301 永久重定向302 临时重定向
第一次访问1. 浏览器请求 old → 服务器返回 301 + 新地址；2. 浏览器跳转 new，并把「old→new」的关系永久存在本地缓存1. 浏览器请求 old → 服务器返回 302 + 新地址2. 浏览器跳转 new，不缓存任何关系
第二次访问浏览器直接查本地缓存：“哦，old 永久指向 new” → 直接跳 new，根本不发请求给服务器浏览器重新发请求到 old → 服务器再次返回 302 → 再跳 new

你还可以给返回的响应内容指定渲染引擎，不过这需要先这样设置：

image.png

分别指定静态资源的路径和模版的路径，并指定模版引擎为 handlerbars。

当然，还需要安装模版引擎的包 hbs：

npm install --save hbs

然后准备图片和模版文件：

image.png

在 handler 里指定模版和数据：

image.png

就可以看到渲染出的 html 了：

image.png

装饰器汇总

这节我们梳理了下 Nest 全部的装饰器

模块的装饰器：

  • @Module： 声明 Nest 模块
  • @Controller：声明模块里的 controller
  • @Injectable：声明模块里可以注入的 provider
  • @Inject：通过 token 手动指定注入的 provider，token 可以是 class 或者 string
  • @Optional：声明注入的 provider 是可选的，可以为空
  • @Global：声明全局模块
  • @SetMetadata：在 class 或者 handler 上添加 metadata

请求体的装饰器：

  • @Param：取出 url 中的参数，比如 /aaa/:id 中的 id
  • @Query: 取出 query 部分的参数，比如 /aaa?name=xx 中的 name
  • @Body：取出请求 body，通过 dto class 来接收
  • @Headers：取出某个或全部请求头
  • @Session：取出 session 对象，需要启用 express-session 中间件
  • @HostParm： 取出 host 里的参数
  • @Req、@Request：注入 request 对象

响应体的装饰器：

  • @Res、@Response：注入 response 对象，一旦注入了这个 Nest 就不会把返回值作为响应了，除非指定 passthrough 为true
  • @HttpCode： 修改响应的状态码
  • @Header：修改响应头
  • @Redirect：指定重定向的 url
  • @Render：指定渲染用的模版引擎

把这些装饰器用熟，就掌握了 nest 大部分功能了。

自定义装饰器

Nest 内置了很多装饰器，大多数功能都是通过装饰器来使用的。但当这些装饰器都不满足需求的时候，能不能自己开发呢？

装饰器比较多的时候，能不能把多个装饰器合并成一个呢？

自然是可以的。

很多内置装饰器我们都可以自己实现。

创建个 decorator：

nest g decorator aaa --flat

image.png

这个装饰器就是自定义的装饰器。

之前我们是这样用的 @SetMetadata:

image.png

但是, 不同 metadata 有不同的业务场景，有的是用于权限的，有的是用于其他场景的。

现在都用 @SetMetadata 来设置太原始了。

这时候就可以这样封装一层：

image.png

装饰器就可以简化成这样：

image.png

还有，有没有觉得现在装饰器太多了，能不能合并成一个呢？

当然也是可以的。

这样写：

import { applyDecorators, Get, UseGuards } from '@nestjs/common';
import { Aaa } from './aaa.decorator';
import { AaaGuard } from './aaa.guard';

export function Bbb(path, role) {
  return applyDecorators(
    Get(path),
    Aaa(role),
    UseGuards(AaaGuard)
  )
}

在自定义装饰器里通过 applyDecorators 调用其他装饰器。

image.png

这三个 handler 的装饰器都是一样的效果。

这就是自定义方法装饰器。

此外，也可以自定义参数装饰器：

import { createParamDecorator, ExecutionContext } from '@nestjs/common';

export const Ccc = createParamDecorator(
  (data: string, ctx: ExecutionContext) => {
    return 'ccc';
  },
);

先用用看：

image.png

大家猜这个 c 参数的值是啥？

image.png

没错，就是 ccc，也就是说参数装饰器的返回值就是参数的值。

回过头来看看这个装饰器：

image.png

data 很明显就是传入的参数，而 ExecutionContext 就是上下文，可以取出 request、response 对象。

这样那些内置的 @Param、@Query、@Ip、@Headers 等装饰器，我们是不是能自己实现了呢？

import { createParamDecorator, ExecutionContext } from '@nestjs/common';
import { Request } from 'express';

export const MyHeaders = createParamDecorator(
  (key: string, ctx: ExecutionContext) => {
    const request: Request = ctx.switchToHttp().getRequest();
    return key ? request.headers[key.toLowerCase()] : request.headers;
  },
);

通过 ExecutionContext 取出 request 对象，然后调用 getHeader 方法取到 key 对应的请求头返回。

效果如下：

image.png

分别通过内置的 @Headers 装饰器和我们自己实现的 @MyHeaders 装饰器来取请求头，结果是一样的。

再来实现下 @Query 装饰器：

export const MyQuery = createParamDecorator(
    (key: string, ctx: ExecutionContext) => {
        const request: Request = ctx.switchToHttp().getRequest();
        return request.query[key];
    },
);

和内置的 Query 用起来一毛一样！

同理，其他内置参数装饰器我们也能自己实现。

而且这些装饰器和内置装饰器一样，也可以使用 Pipe 做参数验证和转换。

image.png

知道了如何自定义方法和参数的装饰器，那 class 的装饰器呢？

其实这个和方法装饰器的定义方式一样：

比如单个装饰器：

image.png

也可以通过 applyDecorators 组合多个装饰器：

image.png

avatar
文章
阅读
粉丝