프론트 엔드 요청에 Koa의 양파 모델 적용

현재 대부분의 프런트엔드 요청 라이브러리는 요청과 응답을 처리하기 위해 두 개의 후크 기능을 사용하며 요청에 너무 많은 비즈니스 로직을 추가하면 유지 관리가 어려워집니다.

어니언 모델은 요청과 응답을 처리하는 매우 우아한 기술이며 노드 개발에서 이를 위한 매우 성숙한 애플리케이션을 보유하고 있는데 프런트 엔드 요청도 이 방식으로 변경하도록 허용하면 안 될까요?

다음은 간단한 프로토타입 예입니다.

/**
 * Composer
 * https://github.com/reduxjs/redux/commit/44dfc39c3f8e5e8b51eeab7c44057da6c1086752
 * @param {[fuction]} funcs middleware list
 * @return {function} (...args) => f1(f2(f3(...args)))
 */
const compose = (funcs) => funcs.reduce((a, b) => (...args) => a(b(...args)));

// middlewares
const middleware1 = (next) => async (req) => {
  console.log("1");
  const res = await next(req);
  console.log("1");
  return res;
};
const middleware2 = (next) => async (req) => {
  console.log("2");
  const res = await next(req);
  console.log("2");
  return res;
};
const middleware3 = (next) => async (req) => {
  console.log("3");
  const res = await next(req);
  console.log("3");
  return res;
};

/**
 * This can be replaced with: fetch, XMLRequest
 */
const adapter = ({ params }) => {
  console.log("request");
  // mock ruquest
  return Promise.resolve(`Hello ${params.username}, I'm mock data.`);
};

/**
 * Http method
 */
const get = async (path, params) => {
  const dispatch = compose([middleware1, middleware2, middleware3]);
  return dispatch(adapter)({ path, params });
};

/**
 * Mock login
 */
const login = async () => {
  const res = await get("/api/login", { username: "John" });
  console.log(res);
};

login();

// --- Login output: ----
/**
 * 1
 * 2
 * 3
 * request
 * 3
 * 2
 * 1
 * Hello John, I'm mock data.
 */

하나의 요청 처리를 미들웨어로 변경합니다. 오류 가로채기, 이벤트 추적, 새로 고침 토큰 등. 각 기능은 별도의 미들웨어이며, 이들 사이에 결합이 없으며 미들웨어를 쉽게 제거하거나 추가할 수 있으며 코드가 잘 작동합니다.

더 이상 요청 시 논리를 두 개의 개별 후크 메서드로 분할할 필요가 없습니다.

이것이 요청을 가로채는 완벽한 방법이라고 생각하고 이 아이디어를 프로젝트로 전환했습니다.
다음과 같습니다.

import Resreq from 'resreq'

const resreq = new Resreq({
  baseUrl: 'https://example.com'
})

// Intercepting responses and requests using middleware
resreq.use((next) => async (req) => {
  try {
    console.log(req) // Request can be changed here
    const res = await next(req)
    console.log(res) // Response can be changed here
    return res
  } catch (error) {
    console.log(error) // Catch errors here
    throw error
  }
})

const res = await resreq.get('/api', {
  params: { foo: 'bar' }
})

console.log(res.json())

Github: https://github.com/molvqingtai/resreq