Skip to content
导航

中间件

中间件

基于洋葱模型的中间件。

前言

如果您了解或者使用过koa,相信您一定十分了解什么是洋葱模型,中间件该怎么写。

中间件是一个异步函数,接收 contextnext 两个参数。

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');