Демо прокси для АПИ слоя на клиенте

Демо проект демонтрирует использование слоя АПИ, реализованного при помощи Proxy. Для простоты кода и демонстрации идеи реализуем следующие соглашения:

• протокол АПИ - RPC
• данные передаются в формате json
• не будем реализовывать всех проверок для простоты кода
• нотация клиентских методов - camelCase
• имя метода на клиенте имеет следующую структуру: <method><entityName>-> createUser
• <method> проецируется на название одного из методов http протокола:

  const httpMethods = {
    get: "GET",
    create: "POST",
    update: "PUT",
    change: "PATCH",
    delete: "DELETE",
  };

• имя метода на сервере имеет snake нотацию creteUser -> create_user

Пример вызова на клиенте

api.getUsers();
// => GET http://domain/api/get_users

api.getUser({ id: 1 });
// => GET http://domain/api/get_user?id=1

api.createUser({ name: "Ivan", email: "[email protected]", password: "123456" });
// => POST http://domain/api/create_user
// body: { name: "Ivan", email: "[email protected]", password: "123456" }

api.updateUser({ id: 1, name: "Ivan", email: "[email protected]" });
// => PUT http://domain/api/update_user
// body: { id: 1, name: "Ivan", email: "[email protected]" }

api.changeUserPassword({
  id: 1,
  oldPassword: "123456",
  newPassword: "new password",
});
// => PATCH http://domain/api/change_user_password
// body: { id: 1, oldPassword: "123456", newPassword: "new password" }

api.deleteUser({ id: 1 });
// => DELETE http://domain/api/delete_user
// body: { id: 1 }

Для установки всех зависимостей выполните в терминале команду

npm install

Для запуска проекта нужно в окне терминала выполнить команду

npm run start

Для остановки процесса нужно в терминале процесса нажать комбинацию клавиш Ctrl + C;

1. Запустите сервер, откройте браузер по адресу http://localhost:3000, откройте консоль и убедитесь что все вызовы АПИ были выполнены успешно и вернули результат.

2. Остановите сервер.

3. Теперь для понимания процесса обновления клиента после изменений на сервере измените к примеру имя метода на сервере с create_user на create_person.

4. Для того, чтобы эти изменения были применимы на клиенте - необходимо изменить имя метода в файле описания интерфейса АПИ ./src/api-interface.ts - переименуйте метод в этом файле c createUser на createPerson.

5. Теперь перейдите в файл клиента ./scr/client/index.ts - на вызове api.createUser(...) вы увидите ошибку typescript. Наведите мышку на слово createUser - вы увидите сообщение об ошибке: Property 'createUser' does not exist on type 'API'. Удалите .createUser поставьте точку - IDE покажет вам список доступных методов - среди них будет и новое имя метода createPerson. Выберите его.

6. Запустите процессы снова и убедитесь в том что все работает

Вы можете ихменить параметры, создать или удалить методы на сервере - обновив описание типов вы уже "обновили" АПИ слой на клиенте.

Таким образом не меняя код в слое АПИ на клиенте вы только при помощи описания типов изменяете код в приложении, а все необходимое выполнит прокси-объект в соответствии с вашими требованиями и соглашениями.

Данные соглашения и ограничения были приняты исключительно в демонстрационных целях для демонстрации реализации сложных договоренностей. Вы можете выработать свои соглашения и ограничения и реализовать их в объекте-прокси.

Я рекомендую в качестве протокола API использовать JSON RPC, который является протоколом обмена информацией для внутренней инфраструктуры и хорошо реализуется данным подходом.