[22 мая 2022 г.]
Привет всем!
Это продолжение предыдущего поста о бессерверных функциях. В этом посте я немного изменил подход к тому, как мы можем получить данные о флаге страны и использовать их как пользователь.
Прежде чем продолжить, ознакомьтесь с предыдущей статьей в моем блоге 🙂
Начало работы с бессерверными функциями с помощью Vercel — I
Давайте начнем.
В предыдущем посте мы создали бессерверные функции, которые использовали POST-запрос Axios.
Поэтому я подумал, почему бы не использовать его как GET-запрос, а в качестве ответа предоставлять изображение.
В результате API будет выглядеть примерно так:
/api/getCountryFlagByNationality?nationality=Australian
и мы получим такой ответ:
Довольно просто, верно?
Но дело в том, что… Я понятия не имею, с чего начать.
Так что позвольте мне немного погуглить и узнать об этом.
Из того, что я вижу, мне нужно знать две вещи:
- Получение параметров запроса из самого URL
- Передача изображений в качестве ответа
[11 июня 2022 г.]
Я случайно вспомнил из своей подсознательной памяти 😅, что один из open-source репо одного из моих коллег (github-readme-stats Анурага Хазры) подавал SVG в качестве ответа.
Так что я случайно взглянул на код и получил слабую идею.
Дело в том, что в своем open-source он создал SVG и добавил детали.
У меня же была ссылка на изображение в формате SVG.
Есть несколько шагов, чтобы заставить его работать. Позвольте мне рассказать вам об этом.
Предположим, что нам нужен флаг, основанный на национальности.
Теперь, поскольку мы передаем параметр в URL. Вы можете получить переменную из req.query вашей бессерверной функции.
const { nationality } = _req_.query;
Мы получим URL нашего изображения из библиотеки, сделав следующее
const image_url = findFlagUrlByNationality(nationality);
Нам нужна помощь крошечной библиотеки GOT (не Game of Thrones) 😜.
Ознакомьтесь с пакетом GOT здесь.
Это мощная библиотека HTTP-запросов, которая поможет получить наше изображение флага.
const imageRequest = got(image_url);
Это возвращает Promise, который мы можем разрешить, чтобы получить изображение и буфер.
const [imageResponse, imageBuffer] =
await Promise.all([imageRequest, imageRequest.buffer()]);
С помощью этого мы создаем ответ нашей бессерверной функции.
- Установите заголовки, добавьте
cache-control&content-type.
res.setHeader("Cache-Control", "s-maxage=43200");
res.setHeader("content-type", imageResponse.headers["content-type"]);
- Отправьте буфер изображений в качестве ответа
_res_.send(imageBuffer);
Это обертывает нашу бессерверную функцию. Давайте попробуем, как она работает.
Откройте Chrome и перейдите в раздел
[http://localhost:3000/api/getCountryFlagByNationality?nationality=Australian](http://localhost:3000/api/getCountryFlagByNationality?nationality=Australian)
Теперь в качестве ответа мы получим флаг Австралии.
Вау! 💥
Давайте развернем его, и вот, пожалуйста; SVG будет передан с помощью GET-запроса.
Таким образом, вы можете передать API нашей бессерверной функции непосредственно в src HTML.
Что-то вроде этого:
Нажмите здесь, чтобы увидеть изображение флага Австралии.
Бессерверные функции были развернуты в URL :
https://country-flags-topaz.vercel.app
Использование:
Посмотрите другие примеры здесь.
Зайдите в репозиторий и разверните экземпляр для себя 🙂
Это подводит нас к концу этого поста.
Это Картик из Timeless
Если вы считаете эту статью полезной, напишите мне в комментариях, буду рад узнать ваше мнение. Спасибо 🙂
Если вы обнаружили какие-либо трудности или видите что-то, что можно было бы сделать лучше, пожалуйста, не стесняйтесь добавлять свои комментарии!