>웹 프론트엔드 >JS 튜토리얼 >노드의 Koa 미들웨어 메커니즘 문제 분석

노드의 Koa 미들웨어 메커니즘 문제 분석

巴扎黑
巴扎黑원래의
2017-08-23 13:59:061270검색

이 글은 주로 노드의 koa 미들웨어 메커니즘에 대한 자세한 설명을 소개하고, koa와 호환성 문제를 자세히 소개합니다. 관심 있는 분들은 이에 대해 자세히 알아볼 수 있습니다.

koa

koa는 Express의 오리지널 클래스 Centaur가 구축한 더 작고 표현력이 풍부하며 강력한 웹 프레임워크입니다.

내 눈에는 확실히 Koa가 Express보다 훨씬 가볍습니다. 제게는 Koa가 미들웨어 프레임워크처럼 느껴집니다. 해당 기능을 사용해야 할 때는 해당 미들웨어를 사용하면 됩니다. 라우팅 시스템 등 더 좋은 점은 Express가 콜백을 기반으로 처리된다는 점입니다. 콜백이 얼마나 나쁜지는 직접 검색하고 확인할 수 있습니다. koa1은 co 라이브러리를 기반으로 하므로 koa1은 콜백 대신 Generator를 사용하고 koa2는 노드의 async/await 지원으로 인해 async/await를 사용합니다. 비동기 및 공동 라이브러리에 대해서는 제가 이전에 작성한 기사(비동기 이해)를 참조할 수 있습니다. Koa는 다양한 미들웨어의 선반이라고 할 수 있습니다. koa의 미들웨어 부분 구현을 살펴보겠습니다.

koa1의 미들웨어

koa1은 이를 주로 Generator를 사용하여 구현합니다.


app.use(function *(next){
  console.log(1);
  yield next;
  console.log(5);
});
app.use(function *(next){
  console.log(2);
  yield next;
  console.log(4);
});
app.use(function *(){
  console.log(3);
});

출력은 1, 2, 3, 4, 5입니다. koa의 미들웨어 구현은 주로 koa-compose에 의존합니다.


function compose(middleware){
 return function *(next){
  if (!next) next = noop();

  var i = middleware.length;
  // 组合中间件
  while (i--) {
   next = middleware[i].call(this, next);
  }

  return yield *next;
 }
}
function *noop(){}

소스 코드는 매우 간단합니다. 모든 미들웨어를 직렬로 연결하려면 먼저 마지막 미들웨어에 noop을 전달하고, 정렬된 첫 번째 미들웨어를 다음으로 카운트다운에 전달합니다. 마지막 미들웨어는 정렬 후 첫 번째 미들웨어입니다. 말하기가 더 복잡합니다. 그림을 살펴보겠습니다.

효과는 위 그림과 같으며, 이는 redux가 다음에 달성해야 하는 목표와 유사합니다. 다음 미들웨어를 사용하면 이 프로세스를 쉽게 구현할 수 있습니다. 이를 직렬로 결합하고 미들웨어의 전체 구현을 간단히 시뮬레이션해 보겠습니다.


const middlewares = [];

const getTestMiddWare = (loggerA, loggerB) => {
  return function *(next) {
    console.log(loggerA);
    yield next;
    console.log(loggerB);
  }
};
const mid1 = getTestMiddWare(1, 4),
  mid2 = getTestMiddWare(2, 3);

const getData = new Promise((resolve, reject) => {
  setTimeout(() => resolve('数据已经取出'), 1000);
});

function *response(next) {
  // 模拟异步读取数据库数据
  const data = yield getData;
  console.log(data);
}

middlewares.push(mid1, mid2, response);
// 简单模拟co库
function co(gen) {
  const ctx = this,
    args = Array.prototype.slice.call(arguments, 1);
  return new Promise((reslove, reject) => {
    if (typeof gen === 'function') gen = gen.apply(ctx, args);
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    const baseHandle = handle => res => {
      let ret;
      try {
        ret = gen[handle](res);
      } catch(e) {
        reject(e);
      }
      next(ret);
    };
    const onFulfilled = baseHandle('next'),
      onRejected = baseHandle('throw');
      
    onFulfilled();
    function next(ret) {
      if (ret.done) return reslove(ret.value);
      // 将yield的返回值转换为Proimse
      let value = null;
      if (typeof ret.value.then !== 'function') {
        value = co(ret.value);
      } else {
        value = ret.value;
      }
      if (value) return value.then(onFulfilled, onRejected);
      return onRejected(new TypeError('yield type error'));
    }
  });
}
// 调用方式
const gen = compose(middlewares);
co(gen);

koa2 middleware

async/await, co.와 같은 도구 라이브러리에 의존할 필요가 없는 것 같습니다. 이제 기본 라이브러리를 사용하면 koa도 변경되었습니다.


function compose (middleware) {
 // 参数检验
 return function (context, next) {
  // last called middleware #
  let index = -1
  return dispatch(0)
  function dispatch (i) {
   if (i <= index) return Promise.reject(new Error(&#39;next() called multiple times&#39;))
   index = i
   let fn = middleware[i]
   // 最后一个中间件的调用
   if (i === middleware.length) fn = next
   if (!fn) return Promise.resolve()
   // 用Promise包裹中间件,方便await调用
   try {
    return Promise.resolve(fn(context, function next () {
     return dispatch(i + 1)
    }))
   } catch (err) {
    return Promise.reject(err)
   }
  }
 }
}

koa-compose는 Promise를 사용하고 있으며, koa2의 미들웨어의 매개변수도 1에서 2로 변경되었으며, 다음을 실행하는 미들웨어는 wait next()를 사용하여 위의 예제 코드와 동일한 효과를 얻으려면 다음을 수행해야 합니다. 미들웨어 작성 방식 변경:


const middlewares = [];
const getTestMiddWare = (loggerA, loggerB) => async (ctx, next) => {
  console.log(loggerA);
  await next();
  console.log(loggerB);
};

const mid1 = getTestMiddWare(1, 4),
  mid2 = getTestMiddWare(2, 3);
const response = async () => {
  // 模拟异步读取数据库数据
  const data = await getData();
  console.log(data);
};
const getData = () => new Promise((resolve, reject) => {
  setTimeout(() => resolve(&#39;数据已经取出&#39;), 1000);
});
middlewares.push(mid1, mid2);

// 调用方式
compose(middlewares)(null, response);

호환성을 달성하는 방법

을 볼 수 있습니다. 제가 알아차린 것은 koa1의 미들웨어 구현에 있어서 여전히 많은 차이점이 있다는 것입니다. koa2에서 직접 사용하면 오류가 발생하기 마련입니다. 이 두 버전을 어떻게 호환되게 만드는지도 문제가 되었습니다. koa 팀에서는 koa-convert라는 koa2에서 사용할 수 있는 미들웨어 패키지를 작성했습니다. 이 패키지를 사용하는 방법을 살펴보세요:


function *mid3(next) {
  console.log(2, &#39;koa1的中间件&#39;);
  yield next;
  console.log(3, &#39;koa1的中间件&#39;);
}
convert.compose(mid3)

이 패키지를 구현하기 위한 아이디어를 살펴보겠습니다.


// 将参数转为数组,对每一个koa1的中间件执行convert操作
convert.compose = function (arr) {
 if (!Array.isArray(arr)) {
  arr = Array.from(arguments)
 }
 return compose(arr.map(convert))
}
// 关键在于convert的实现
const convert = mw => (ctx, next) => {
  // 借助co库,返回一个Promise,同时执行yield
  return co.call(ctx, mw.call(ctx, createGenerator(next)));
};

function * createGenerator (next) {
 /*
   next为koa-compomse中:
   function next () {
     return dispatch(i + 1)
   }
 */
 return yield next()
 // 执行完koa1的中间件,又回到了利用await执行koa2中间件的正轨
}

개인적으로 ​koa-convert의 아이디어는 캡슐화하는 것입니다. Generator를 위한 Promise 계층으로, 이전 미들웨어가 wait next()를 사용하여 호출될 수 있도록 하며, Generator 실행을 위해 co 라이브러리를 사용하므로 호환성이 달성됩니다.

위 내용은 노드의 Koa 미들웨어 메커니즘 문제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.