フロントエンド要求へのKoAのタマネギモデルの適用

11065 ワード
front javascript typescript node テキストリンク
現在のほとんどのフロントエンドリクエストライブラリはリクエストとレスポンスを処理する2つのフック関数を使用します.
タマネギモデルは、リクエストと応答を処理するための非常にエレガントなテクニックであり、我々は非常に成熟したアプリケーションのノードの開発には、なぜ私はフロントエンドのリクエストをこの方法に変更することはありませんか?
以下に簡単なプロトタイプの例を示します:
/**
 * 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.
 */
つのリクエスト処理をミドルウェア、例えばエラー妨害、イベントトラッキング、リフレッシュトークンなどに変更します.各機能は別のミドルウェアであり、それらの間の結合はありません
我々はもはや2つの別々のフックのメソッドに要求で論理を分割する必要はありません
私は、これが要求を妨害する完全な方法であると思います、そして、私はこの考えをプロジェクトに変えました
次のようになります.
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())
ギタブ:https://github.com/molvqingtai/resreq
Python 3 JSONデータ解析
[プログラマ]レポート結果の取得(Java)