Задание

Расчитать сухопутный маршрут из одной страны в другую с помощью Rest Countries API, сделав минимум запросов. Код должен работать асинхронно через API получения отдельной страны.

В API можно получить все данные о стране по коду cca3 (что бы это ни было) так: https://restcountries.com/v3.1/alpha/{cca3}

В поле borders лежат коды соседних стран. Нужно вывести в output (см. index.html) список стран, по которым нужно проехать, чтобы попасть из fromCountry в toCountry (используя borders), и количество сделанных запросов.

Чтобы ответ ограничился определёнными полями, добавьте параметр fields. Например: https://restcountries.com/v3.1/alpha/AUT?fields=name&fields=borders&fields=area

{
    "name": {
        "common": "Austria",
        "official": "Republic of Austria",
        "nativeName": {
            "bar": {
                "official": "Republik Österreich",
                "common": "Österreich"
            }
        }
    },
    "capital": [
        "Vienna"
    ],
    "altSpellings": [
        "AT",
        "Osterreich",
        "Oesterreich"
    ],
    "borders": [
        "CZE",
        "DEU",
        "HUN",
        "ITA",
        "LIE",
        "SVK",
        "SVN",
        "CHE"
    ],
    "area": 83871.0
}

Захотите что-то поменять или улучшить, раскрасить, сделать поинтереснее, вывести дополнительную информацию — всё на ваш вкус. Но желательно не переписывать всё полностью и делать это отдельными коммитами. И сначала сделать основную задачу.

Пример

Вводим Австрию и Болгарию, результат:

Austria → Hungary → Serbia → Bulgaria
Austria → Hungary → Romania → Bulgaria

Понадобилось всего 100500 запросов!

Корнер-кейсы

API в некоторых случаях может вернуть ошибку, нужно уметь это обрабатывать, показать ошибку:

• https://restcountries.com/v3.1/alpha/
• https://restcountries.com/v3.1/alpha/bubu

Между странами может не быть маршрута (на островах), или маршрут слишком длинный (ограничимся 10 шагами).

Советы

Изолируйте походы на бэк от кода приложения, пусть это будет чёрный ящик.

Не ходите дважды за одной и той же страной.

Сделайте метод для получения нескольких стран сразу. Под капотом можно брать уже загруженные и ходить за недостающими.

Обратите внимание на доступность контролов, на время запросов можно дизейблить кнопку и инпуты, показывать индикатор загрузки.

Если хотите подключить визуализацию обработки стран (не обязательно):

• Cделайте index.js модулем (добавьте type="module" в <script src="...").
• Подключите внутри maps.js: import Maps from '/maps.js';.
• В начале расчёта вызовите Maps.setEndPoints('AUT', 'BGR');.
• При загрузке страны или пачки стран вызовите Maps.markAsVisited(['CZE', 'DEU', …]);

Под блоком #output должна появиться карта, на которой закрашиваются зелёным посещённые страны.

Чтобы карта не заполнялась слишком быстро, отключите кэш в панели Network в DevTools или поставьте там throttling: 3G.

Если вы пропустили это в первой домашке

• Установите NodeJs, если его нет.
• Установите yarn, если его нет (не обязательно, можно пользоваться npm).
• Включите в своём редакторе ESLint и реформат при сохранении, отключите JSHint и другие линтеры.

Некоторые правила eslint, которые мы обычно используем, отключены для удобства разработки. Например, no-unused-vars, no-console, no-new-wrappers.

См. также:

• Install Node.js on Windows Subsystem for Linux (WSL2)

Бонусный уровень (необязательный)

В реальной жизни мы, конечно, не будем делать столько запросов. Давайте загрузим все страны с границами за один раз и сделаем собственное асинхронное API, которое будет доставать страну по её коду. Например: await getCountry(code) или getCountry(code).then(...).

Если походы на бэк у вас в чёрном ящике, то для приложения ничего не должно поменяться.