https://github.com/budarin/proxy-api-demo
Демо прокси для АПИ слоя на клиенте
https://github.com/budarin/proxy-api-demo
Last synced: 15 days ago
JSON representation
Демо прокси для АПИ слоя на клиенте
- Host: GitHub
- URL: https://github.com/budarin/proxy-api-demo
- Owner: budarin
- License: mit
- Created: 2024-03-09T10:53:19.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-25T19:08:26.000Z (7 months ago)
- Last Synced: 2024-12-18T19:03:49.394Z (5 months ago)
- Language: TypeScript
- Size: 104 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Демо прокси для АПИ слоя на клиенте
Демо проект демонтрирует использование слоя АПИ, реализованного при помощи Proxy.
Для простоты кода и демонстрации идеи реализуем следующие соглашения:
- протокол АПИ - RPC
- данные передаются в формате json
- не будем реализовывать всех проверок для простоты кода
- нотация клиентских методов - camelCase
- имя метода на клиенте имеет следующую структуру: ``-> `createUser`
- `` проецируется на название одного из методов http протокола:
```ts
const httpMethods = {
get: "GET",
create: "POST",
update: "PUT",
change: "PATCH",
delete: "DELETE",
};
```
- имя метода на сервере имеет snake нотацию `creteUser` -> `create_user`
Пример вызова на клиенте
```ts
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 }
```
Для установки всех зависимостей выполните в терминале команду
```shell
npm install
```
Для запуска проекта нужно в окне терминала выполнить команду
```shell
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, который является протоколом обмена информацией для внутренней инфраструктуры и хорошо реализуется данным подходом.