中间件
中间件
基于洋葱模型的中间件。
前言
如果您了解或者使用过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;
};
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');
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');
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/user -> instance response -> axios response
instance('/user');
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/user -> instance response -> axios response
instance('/user');