Я создавал приложение для удовольствия, используя бесплатный API Pokemon (это круто!), который позволил бы пользователю выбрать атрибут типа покемона, а затем показать все типы, против которых выбранный тип либо силен, либо слаб. . Это поставило передо мной несколько задач, в том числе то, как я мог принять пользовательский ввод и использовать его для изменения конечной точки моего вызова fetch(). В этом посте я поделюсь с вами, как я этого добился!
Что делает .concat()?
Согласно веб-документам MDN, «метод concat() используется для объединения двух или более массивов. Этот метод не изменяет существующие массивы, а вместо этого возвращает новый массив». Это определение, очевидно, правильное, но стоит отметить, что .concat() также работает для строк, и именно так я буду его использовать.
Итак, как и в приведенном выше примере, если мне нужно перейти к разным конечным точкам одного и того же API, я могу создать переменную, в которой хранится базовый URL-адрес, а затем использовать метод concat() для перехода к соответствующей конечной точке на основе пользователя. вход.
Хорошо, а как это выглядит на практике?
Правильно, конкретика! Итак, часть API, которую я использую для этого приложения, содержит массив объектов, каждый из которых имеет две пары ключ/значение: «имя» и «url», а ключ «url» является ссылкой на данные этого типа. , но примечательно, что URL-адрес точно такой же, как текущий URL-адрес, только с определенным числом, добавленным в конце.
Поэтому я создал переменную с именем «baseurl» и установил ее равной… ну, базовому URL-адресу, а затем создал другую переменную с именем «userSelectedIndex», которую я установил равной числу, связанному с любым типом, который может выбрать пользователь. Таким образом, когда я делаю вызов fetch(), я могу использовать baseurl вместо фактического URL-адреса, а затем конкатенировать соответствующий номер в конце URL-адреса, переводя свой код в данные, запрошенные пользователем.
Теперь у меня есть динамический запрос fetch()!
Создание этих двух переменных и использование метода concat() в моем запросе на выборку открыло множество возможностей для моего приложения. Последним шагом, чтобы сделать приложение функциональным, было сохранение индекса выбора пользователя в хранилище сеансов, а затем перезагрузка страницы, что позволило получить доступ к данным из новой конечной точки. Если вы хотите увидеть код в действии, вы можете получить доступ к репозиторию этого проекта здесь. Спасибо за прочтение!
