docs: 介绍中间件
parent
3931f230de
commit
63f424133e
|
@ -27,7 +27,6 @@ axios-miniprogram 是一款为小程序平台量身定制的轻量级请求库
|
|||
## 特性
|
||||
|
||||
- 支持 `Typescript`,健全的类型系统,智能的 `IDE` 提示。
|
||||
- 支持 `Promise`。
|
||||
- 支持 动态地址。
|
||||
- 支持 校验状态码。
|
||||
- 支持 参数序列化。
|
||||
|
@ -35,9 +34,10 @@ axios-miniprogram 是一款为小程序平台量身定制的轻量级请求库
|
|||
- 支持 错误处理。
|
||||
- 支持 转换数据。
|
||||
- 支持 取消请求。
|
||||
- 支持 扩展实例。
|
||||
- 支持 中间件。
|
||||
- 支持 拦截器。
|
||||
- 支持 派生领域。
|
||||
- 支持 适配器。
|
||||
- 支持 平台适配器。
|
||||
|
||||
## 目前内部支持的平台
|
||||
|
||||
|
|
|
@ -5,26 +5,120 @@ 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';
|
||||
|
||||
axios.use(async (ctx, next) => {
|
||||
console.log('start1');
|
||||
// use 会返回 this,可以链式添加多个
|
||||
axios
|
||||
.use(async (ctx, next) => {
|
||||
console.log('1');
|
||||
await next();
|
||||
console.log('end1');
|
||||
});
|
||||
|
||||
axios.use(async (ctx, next) => {
|
||||
console.log('start2');
|
||||
console.log('4');
|
||||
})
|
||||
.use(async (ctx, next) => {
|
||||
console.log('2');
|
||||
await next();
|
||||
console.log('end2');
|
||||
});
|
||||
console.log('3');
|
||||
});
|
||||
|
||||
// start1 -> start2 -> /test -> end2 -> end1
|
||||
// 洋葱模型执行顺序
|
||||
// 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');
|
||||
```
|
||||
|
|
|
@ -5,7 +5,7 @@ title: 请求拦截器
|
|||
# {{ $frontmatter.title }}
|
||||
|
||||
::: tip {{ $frontmatter.title }}
|
||||
用于请求发出前拦截请求。
|
||||
用于请求发送前拦截请求。
|
||||
|
||||
通常会用于转换请求配置,或实现一些自定义功能。
|
||||
:::
|
||||
|
|
|
@ -5,7 +5,7 @@ title: 转换数据
|
|||
# {{ $frontmatter.title }}
|
||||
|
||||
::: tip {{ $frontmatter.title }}
|
||||
请求发出前转换请求数据,响应到达 `then` 之前转换响应数据。
|
||||
请求发送前转换请求数据,响应到达 `then` 之前转换响应数据。
|
||||
:::
|
||||
|
||||
## 转换请求数据
|
||||
|
|
|
@ -25,6 +25,10 @@
|
|||
"homepage": "https://axios-miniprogram.com",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"engines": {
|
||||
"node": ">=16",
|
||||
"pnpm": ">=7"
|
||||
},
|
||||
"scripts": {
|
||||
"cz": "simple-git-hooks && czg",
|
||||
"build": "esno scripts/build.ts",
|
||||
|
|
|
@ -470,6 +470,7 @@ export default class Axios {
|
|||
});
|
||||
chain.push(errorHandler);
|
||||
|
||||
const source = Promise.resolve(mergeConfig(this.defaults, config));
|
||||
return chain.reduce(
|
||||
(next, { resolved, rejected }) =>
|
||||
next.then(
|
||||
|
@ -477,7 +478,7 @@ export default class Axios {
|
|||
resolved,
|
||||
rejected,
|
||||
),
|
||||
Promise.resolve(mergeConfig(this.defaults, config)),
|
||||
source,
|
||||
) as Promise<AxiosResponse>;
|
||||
};
|
||||
|
||||
|
|
|
@ -115,7 +115,7 @@ describe('src/request/cancel.ts', () => {
|
|||
expect(() => s.token.throwIfRequested()).toThrowError('1');
|
||||
});
|
||||
|
||||
test('应该可以在请求发出之前取消', async () => {
|
||||
test('应该可以在请求发送之前取消', async () => {
|
||||
const cb = vi.fn();
|
||||
const s = CancelToken.source();
|
||||
|
||||
|
@ -131,7 +131,7 @@ describe('src/request/cancel.ts', () => {
|
|||
expect(isCancel(cb.mock.calls[0][0])).toBeTruthy();
|
||||
});
|
||||
|
||||
test('应该可以在请求发出之后取消', async () => {
|
||||
test('应该可以在请求发送之后取消', async () => {
|
||||
const cb = vi.fn();
|
||||
const s = CancelToken.source();
|
||||
|
||||
|
|
Loading…
Reference in New Issue