Это проектная неделя на моем учебном курсе по программированию, и мне сказали, что мне нужно извлечь данные с сервера API. Мой партнер по проекту и я решили создать рынок NFT (Non-Fungible Token) из-за популярного спроса на NFT прямо сейчас. Должны ли мы теперь загружать NFT на нашу веб-страницу рынка вручную, полуавтоматически или автоматически из API? Мы знали, что Opensea — это место, где можно купить NFT, поэтому после нескольких минут поиска в Google мы обнаружили, что у них есть бесплатный API! Если вы хотите отобразить NFT на своем веб-сайте или добавить их в базу данных, я опишу процесс получения этих данных ниже.

NFT API Opensea: https://docs.opensea.io/reference/api-overview

'GET' FETCH: после создания нашей веб-страницы React с помощью create-react-app в командной строке Mac OS мы настроили структуру компонента React для получения информации NFT, а затем создание карт для отображения на нашей веб-странице. Затем мы поместили нашу функцию GET FETCH на нашу домашнюю страницу (это может быть либо страница вашего приложения, либо страница компонента более низкого уровня). Я покажу код ниже:

Используя выборку «GET» (строка 58), мы запросили файл JSON из конечной точки Opensea API «getting-assets». Чтобы найти эту конечную точку на веб-сайте API Opensea (см. ссылку вверху этой страницы), нажмите ссылку «Получение активов» в левой части страницы. Как описано на веб-сайте, страница получения активов позволяет вам получить список объектов NFT. Я выбрал вариант javascript для языка. Существуют также параметры ПАРАМЫ ЗАПРОСА, которые позволяют указать ограничение на количество извлекаемых объектов NFT (мы выбрали 25), а также параметр, позволяющий выбрать имя коллекции NFT.

Для нашего проекта торговой площадки NFT мы хотели показать около четырех типов коллекций NFT. В строке 51 вы увидите, что мы установили массив из этих четырех названий коллекций в константу collections. Затем, используя интерполяцию (строка 58) и функцию .forEach (строка 56), наш код будет запускать выборку четыре раза, по одному разу для имени коллекции.

С помощью функции .json() (строка 59) мы преобразовали каждый извлеченный файл JSON в объект assets, содержащий массив объектов NFT, по 25 на каждый. коллекция. Обратите внимание, что наш код показывает константу nftArray; однако для доступа к фактическому массиву нам нужно использовать nftArray.assets (Opensea предоставляет объект ресурсов, а не массив). Затем мы используем стрелочную функцию для каждого nftArray.assets, чтобы записать массив в console.log и использовать forEach, чтобы добавить каждый объект NFT в массиве в новый массив, completeNftArray с помощью функции .push. До этого в строке 54 мы объявили этот массив и установили его равным пустому массиву. После запуска обоих циклов forEach мы должны получить 25 объектов NFT, умноженных на 4 коллекции, чтобы в итоге получить 100 объектов NFT.

В строке 69 вы увидите, что мы завершаем нашу функцию collections.forEach с помощью setData(completeNftArray). Здесь мы используем функцию обратного вызова, которая указывает на нашу функцию React useState, которая устанавливает постоянный массив data равным completeNftArray. Как только это будет завершено, наша константа массива data может быть передана другим нашим компонентам React для рендеринга.

Функции React useState позволяют нам установить начальное состояние (значение) для нашей константы (данныекак показано выше), которая является первой записью в квадратных скобках после const. Вторая запись внутри скобок — это наша функция, которая может установить/обновить константу data на новое значение (массив). Исходное состояние помещается в круглые скобки после useState, которое обычно представляет собой пустой массив для констант типа массива. Переменная useState walletNFTs относится к другому компоненту React нашего проекта. Затем переменная loadinguseState, которую мы использовали для отображения Загрузка… на экране во время выполнения нашей выборки GET.

Возвращаясь к нашему первому изображению в строке 50, вы увидите, что у нас есть вся эта функция извлечения GET внутри функции React useEffect, которая позволяет нам контролировать, когда эта функция должна повторно запускать (или не запускать повторно) нашу функцию выборки GET. Это не показано на изображении кода выше, но не забудьте закрыть useEffect запятой и пустыми скобками , [ ] } . Это определяет, какие зависимости вызовут повторный запуск нашего useEffect, и в этом случае закрытые скобки говорят, что он запускается только один раз.

Если вы в настоящее время создаете проект или приложение, для которого требуется получение React и/или Javascript GET из API Opensea, я надеюсь, что мое руководство было полезным! Если вы застряли при построении ваших подкомпонентов после выборки, взгляните на структуру ключей, значений и объектов, которые находятся внутри конечных точек Opensea API (например, cryptopunks). Вы можете заметить, что в этих объектах не прослушивались цены продажи в ETH. Для нашего проекта мы потратили время на изучение того, как получить доступ к текущим или прошлым распродажным ценам Opensea.