跳到主要内容
版本:2.0.0

接口开发 & 前端调用

“零” API 调用

在 Midway Hooks 中,你在前端可以直接导入服务端函数并进行调用。

这意味着你再也不用拼接 API URL,在前端手动发起请求并管理状态等。

后端接口

import { useContext } from '@midwayjs/hooks';

export async function getPath() {
// Get HTTP request context by Hooks
const ctx = useContext();
return ctx.path;
}

export async function post(name: string) {
const ctx = useContext();

return {
message: `Hello ${name}!`,
method: ctx.method,
};
}

前端调用

import { getPath, post } from './apis/lambda';

// send GET request to /api/getPath
const path = await getPath();
console.assert(path === '/api/getPath');

const { message, method } = await post('Jake');

console.assert(message === 'Hello Jake!');
console.assert(method === 'POST');

我们打造了“零” API 调用功能,你只需要关注于接口的调用,而非 HTTP 的细节。

创建接口与调用

在 Midway Hooks 中,我们默认配置的接口是在 lambda 文件夹下 任意 .ts 文件中导出的异步函数,你也可以通过路由配置来使用自定义的文件夹。

Get

导出的函数中,如果不带参数则为 Get 接口。

/apis/lambda/index.ts

export async function foo() {
return 'foo';
}

前端调用示例(src/app.tsx)

import { foo } from './apis/lambda';

const response = await foo();
console.log(response); // foo

Post

函数有参数则为 Post 接口。

/apis/lambda/index.ts

export async function bar(name: string) {
return `hello ${name}`;
}

前端调用示例(src/app.tsx)

import { bar } from './apis/lambda';

const response = await bar('张三');
console.log(response); // hello 张三

Put/Delete

Midway Hooks 的接口信息与前端调用 SDK 均为自动生成,因此不支持 Put/Delete 调用。

规则

Midway Hooks 的接口,必须是在模块顶层直接导出的函数。

例子

export async function demo() {}

export const demo = async function () {};

export default async function demo() {}