跳到主要内容
版本：4.0.0 🚧

接口开发

路由​

在 Midway Hooks 中，你可以通过 @midwayjs/hooks 提供的 Api() 函数来快速创建接口。

Hello World 示例：

/src/hello.ts
import {
  Api,
  Get,
} from '@midwayjs/hooks';

export default Api(
  Get(), // Http Path: /api/hello,
  async () => {
    return 'Hello World!';
  }
);

一个 API 接口由以下部分组成：

  • Api()：定义接口函数
  • Get(path?: string)：指定 Http 触发器，指定请求方法为 GET，可选参数 path 为接口路径，不指定路径的情况下会根据函数名 + 文件名生成路径，默认带有 /api 前缀
  • Handler: async (...args: any[]) => { ... }：用户逻辑，处理请求并返回结果

你也可以指定路径，例子如下。

/src/hello.ts
import {
  Api,
  Get,
} from '@midwayjs/hooks';

export default Api(
  Get('/hello'), // Http Path: /hello,
  async () => {
    return 'Hello World!';
  }
);

请求上下文（Context / Request / Response）​

你可以通过 @midwayjs/hooks 提供的 useContext 来获取请求上下文对象。

以使用 Koa 框架为例，那么 useContext 将返回 Koa 的 Context 对象。

基础示例：

  1. 获取请求 Method 和 Path
import {
  Api,
  Get,
  useContext,
} from '@midwayjs/hooks';
import { Context } from '@midwayjs/koa';

export default Api(Get(), async () => {
  const ctx = useContext<Context>();
  return {
    method: ctx.method,
    path: ctx.path,
  };
});
  1. 设置返回的 Header
import {
  Api,
  Get,
  useContext,
} from '@midwayjs/hooks';

export default Api(Get(), async () => {
  const ctx = useContext<Context>();
  ctx.set('X-Powered-By', 'Midway');
  return 'Hello World!';
});

同时我们也可以通过 SetHeader() 来设置 Header。

Http 触发器​

触发器注释
All(path?: string)接受所有 Http Method 的请求
Get(path?: string)接受 GET 请求
Post(path?: string)接受 POST 请求
Put(path?: string)接受 PUT 请求
Delete(path?: string)接受 DELETE 请求
Patch(path?: string)接受 PATCH 请求
Head(path?: string)接受 HEAD 请求
Options(path?: string)接受 OPTIONS 请求

请求 Request​

传递参数 Data​

在 Midway Hooks 中，接口的入参就是声明函数的参数。

基础示例如下：

import {
  Api,
  Post,
} from '@midwayjs/hooks';

export default Api(
  Post(), // Http Path: /api/say,
  async (name: string) => {
    return `Hello ${name}!`;
  }
);

你可以用两种方式来调用接口。

  1. 全栈项目：基于零 Api，导入接口并调用
  2. 手动调用：使用 fetch 在 Http 下，Handler(...args: any[]) 的入参，可以在手动请求时通过设置 Http Body 的 args 参数来传递参数。
import say from './api';

const response = await say('Midway');
console.log(response); // Hello Midway!

查询参数 Query​

查询参数可以实现在 URL 上传递参数的方式，使用该功能时，必须通过 Query<T> 声明类型。

如果希望接口路径是 /articles?page=0&limit=10，可以这样写。

import {
  Api,
  Get,
  Query,
  useContext,
} from '@midwayjs/hooks';

export default Api(
  Get(),
  Query<{
    page: string;
    limit: string;
  }>(),
  async () => {
    const ctx = useContext();
    return {
      page: ctx.query.page,
      limit: ctx.query.limit,
    };
  }
);

前端调用

import getArticles from './api';
const response = await getArticles({
  query: { page: '0', limit: '10' },
});
console.log(response); // { page: '0', limit: '10' }

路径参数 Params​

路径参数可以实现动态路径和从路径中获取参数的功能。使用该功能时，必须手动设置路径，并通过 Params<T> 声明类型。

如果希望接口路径是 /article/100，并获取 id 为 100 的值，可以这样写：

import {
  Api,
  Get,
  Params,
  useContext,
} from '@midwayjs/hooks';

export default Api(
  Get('/article/:id'),
  Params<{ id: string }>(),
  async () => {
    const ctx = useContext();
    return {
      article: ctx.params.id,
    };
  }
);

前端调用

import getArticle from './api/article';
const response = await getArticle({
  params: { id: '100' },
});
console.log(response); // { article: '100' }

请求头 Headers​

请求头可以实现通过 Http Headers 传递参数的功能，使用该功能时，必须通过 Headers<T> 声明类型。

如果希望请求 /auth，并在 Request Headers 中 传递 token，可以这样写：

import {
  Api,
  Get,
  Headers,
  useContext,
} from '@midwayjs/hooks';

export default Api(
  Get('/auth'),
  Headers<{ token: string }>(),
  async () => {
    const ctx = useContext();
    return {
      token: ctx.headers.token,
    };
  }
);

前端调用

import getAuth from './api/auth';
const response = await getAuth({
  headers: { token: '123456' },
});
console.log(response); // { token: '123456' }

响应 Response​

状态码 HttpCode​

支持 HttpCode(status: number)

import {
  Api,
  Get,
  HttpCode,
} from '@midwayjs/hooks';

export default Api(
  Get(),
  HttpCode(201),
  async () => {
    return 'Hello World!';
  }
);

响应头 SetHeader​

支持 SetHeader(key: string, value: string)

import {
  Api,
  Get,
  SetHeader,
} from '@midwayjs/hooks';

export default Api(
  Get(),
  SetHeader('X-Powered-By', 'Midway'),
  async () => {
    return 'Hello World!';
  }
);

重定向 Redirect​

支持： Redirect(url: string, code?: number = 302)

import {
  Api,
  Get,
  Redirect,
} from '@midwayjs/hooks';

export default Api(
  Get('/demo'),
  Redirect('/hello'),
  async () => {}
);

返回值类型 ContentType​

支持： ContentType(type: string)。

import {
  Api,
  Get,
  ContentType,
} from '@midwayjs/hooks';

export default Api(
  Get(),
  ContentType('text/html'),
  async () => {
    return '<h1>Hello World!</h1>';
  }
);