125 lines
2.6 KiB
Markdown
125 lines
2.6 KiB
Markdown
---
|
||
title: 中间件
|
||
---
|
||
|
||
# {{ $frontmatter.title }}
|
||
|
||
::: tip {{ $frontmatter.title }}
|
||
基于洋葱模型的中间件。
|
||
:::
|
||
|
||
## 前言
|
||
|
||
如果您了解或者使用过[koa](https://github.com/koajs/koa)，相信您一定十分了解什么是洋葱模型，中间件该怎么写。
|
||
|
||
中间件是一个异步函数，接收 `context` 和 `next` 两个参数。
|
||
|
||
`context` 是一个对象，提供了 `req` 对象和 `res` 对象作为其做成部分。
|
||
|
||
- `context.req`：请求配置。
|
||
|
||
- `context.res`：请求完成后服务端返回的响应体，它的初始值是 `null`，请求完成之后才能对其进行操作。
|
||
|
||
`next` 是一个异步函数，如果希望程序继续执行后续逻辑，请手动调用它。
|
||
|
||
```ts
|
||
async (ctx, next) => {
|
||
// 请求发送前
|
||
const {
|
||
// 请求配置
|
||
req,
|
||
|
||
// 此时为 null
|
||
res,
|
||
} = ctx;
|
||
|
||
// 调用 next 继续执行后续逻辑，最终发送请求
|
||
await next();
|
||
|
||
// 请求完成后
|
||
const {
|
||
// 请求配置
|
||
req,
|
||
|
||
// 服务端返回的响应体
|
||
res,
|
||
} = ctx;
|
||
};
|
||
```
|
||
|
||
## 全局中间件
|
||
|
||
可以添加全局中间件，对发送的每个请求生效。
|
||
|
||
```ts
|
||
import axios from 'axios-miniprogram';
|
||
|
||
// use 会返回 this，可以链式添加多个
|
||
axios
|
||
.use(async (ctx, next) => {
|
||
console.log('1');
|
||
await next();
|
||
console.log('4');
|
||
})
|
||
.use(async (ctx, next) => {
|
||
console.log('2');
|
||
await next();
|
||
console.log('3');
|
||
});
|
||
|
||
// 洋葱模型执行顺序
|
||
// 1 -> 2 -> /test -> 3 -> 4
|
||
axios('/test');
|
||
```
|
||
|
||
## 实例中间件
|
||
|
||
可以为实例添加中间件，对实例发送的每个请求生效。
|
||
|
||
```ts
|
||
import axios from 'axios-miniprogram';
|
||
|
||
const instance = axios.create({
|
||
baseURL: 'https://api.com',
|
||
});
|
||
|
||
instance.use(async (ctx, next) => {
|
||
console.log('instance request');
|
||
await next();
|
||
console.log('instance response');
|
||
});
|
||
|
||
// instance request -> 'https://api.com/test -> instance response
|
||
instance('https://api.com/test');
|
||
```
|
||
|
||
## 扩展实例中间件
|
||
|
||
可以为扩展实例添加中间件，扩展实例同时也可以复用父级中间件。
|
||
|
||
```ts
|
||
import axios from 'axios-miniprogram';
|
||
|
||
axios.defaults.baseURL = 'https://api.com';
|
||
|
||
axios.use(async (ctx, next) => {
|
||
console.log('axios request');
|
||
await next();
|
||
console.log('axios response');
|
||
});
|
||
|
||
const instance = axios.extend({
|
||
baseURL: '/test',
|
||
});
|
||
|
||
instance.use(async (ctx, next) => {
|
||
console.log('instance request');
|
||
await next();
|
||
console.log('instance response');
|
||
});
|
||
|
||
// 复用父级中间件
|
||
// axios request -> instance request -> https://api.com/test/uesr -> instance response -> axios response
|
||
instance('/user');
|
||
```
|