Меню

Принцип единой ответственности в JS

25.06.2018 - java script, NodeJS, ЯП

Single Responsibility Principle (Принцип единой ответственности)

SOLID

SOLID принципы относятся к объектно-оринтированному программированию.

Каждый класс должен делать одну вещь. Но что значит одна вещь?
Класс должен отвечать за свой специфический участок приложения.

Пример. Начнем с неправильного

//http-client.js
import * as toastr from 'toastr';
export class HttpClient {
    get(url) {
        return fetch(url, {
            headers: {
                'Accept': 'application/json'
            }
        }).then(res => {
            if (res.ok) {
                return res.json();
            } else {
                switch (res.status) {
                    case 401 : toastr.error("You are not authorized to view this content");
                    break;
                    case 404 : toastr.warning("Content not found");
                    break;
                    case 500 : toastr.error("Internal server error");
                    break;
                    default: toastr.info("Unknown error");
                    break;
                }
                console.error(`Http error: ${res.status}`);
            }
        });
    }
}
//app.js
import { HttpClient } from './http-client';
let http = new HttpClient();

http.get("https://httpstat.us/500").then(data => {
    console.log(data);
});

//index.html
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./node_modules/toastr/build/toastr.min.css">
    </head>
    <body>
        <script src="bundle.js"></script>
    </body>
</html>

Вообще, показывать ошибки в консоли для пользователя это совсем неправильно, т.к. они туда всё равно не смотрят. Поэтому воспользуемся библиотекой toastr.

npm i toastr

Что мы делаем не так относительно принципа единой ответственности?

Конечно же вывод ошибок. Во первых он привязан к библиотеке. Поэтому не получится просто взять и использовать функцию в другом месте или проекте. Или что если мы будем использовать эти ошибки при отправке других типов данных или еще что либо.

Нам нужно выделить ошибки в отдельный класс в отдельном модуле. Теперь импортируем на error-handler в http-client.js.

//error-handler.js
import * as toastr from "toastr";

export class ErrorHandler {
  static handle(response) {
    switch (res.status) {
      case 401:
        toastr.error("You are not authorized to view this content");
        break;
      case 404:
        toastr.warning("Content not found");
        break;
      case 500:
        toastr.error("Internal server error");
        break;
      default:
        toastr.info("Unknown error");
        break;
    }
  }
}

//http-client.js
import { ErrorHandler } from './error-handler';

export class HttpClient {
    get(url) {
        return fetch(url, {
            headers: {
                'Accept': 'application/json'
            }
        }).then(res => {
            if (res.ok) {
                return res.json();
            } else {
                ErrorHandler.handle(res);
            }
        });
    }
}

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *