Учебник для отдыха API - клиент отдыха, служба отдыха и вызовы API, объясненные примерами кода.

Автор оригинала: FreeCodeCamp Community Member.

Вы когда-нибудь задавались вопросом, как логин/регистрация на сайте работает на заднем дне? Или как, когда вы ищете «милые котени» на YouTube, вы получите кучу результатов и сможете отсчитать от удаленной машины?

В этом начинающем дружественнике я пойду через процесс создания спокойных API. Мы расслабим некоторый Яргон и посмотрим, как мы можем записать сервер в Nodejs. Давайте немного глубже в JavaScript!

Получить этот жаргон

Итак, что отдых? По словам Википедии:

Давайте демистифицировать то, что это значит (надеюсь, вы получили полную форму). Отдых в основном является набор правил связи между клиентом и сервером. Есть несколько ограничений на определение отдыха:

Архитектура клиент-сервер : Пользовательский интерфейс веб-сайта/приложения должен быть отделен от запроса/хранения данных, поэтому каждая часть может быть масштабирована индивидуально.
Без гражданства : Общение не должно иметь клиентского контекста, сохраненного на сервере. Это означает, что каждый запрос на сервер должен быть сделан со всеми необходимыми данными, и предположения не должны быть сделаны, если у сервера есть какие-либо данные из предыдущих запросов.
Слоистая система : Клиент не должен быть в состоянии сказать, распространяется ли он напрямую с сервером или некоторым посредником. Эти посреднические серверы (будь то прокси или балансировщик нагрузки) позволяют обеспечить масштабируемость и безопасность базового сервера.

Хорошо, так что теперь, что вы знаете, какие успоставляются услуги, вот некоторые термины, используемые в заголовке:

Клиент отдыха : код или приложение, которое может получить доступ к этим службам отдыха. Вы используете один прямо сейчас! Да, браузер может действовать как неконтролируемый клиент для отдыха (веб-сайт обрабатывает запросы браузера). Браузер в течение длительного времени использовал встроенную функцию, называемую XMLHTTPREQUEST для всех запросов для отдыха. Но это было преуспеть на Fetchapi , современный, Обещание На основании подхода к запросам. Другие примеры являются библиотеками кодов, такие как Axios , SuperaGent и получил или некоторые выделенные приложения, такие как Почтальон (или онлайн-версия, Postwoman !) Или инструмент командной строки, как Curl !.
Остальное обслуживание : сервер. Есть много популярных библиотек, которые делают создание этих серверов Breze, как Expressjs для Nodejs и Джанго для питона.
Отдых API : Это определяет конечную точку и методы, разрешенные для доступа к/отправить данные на сервер. Мы подробно поговорим об этом ниже. Другие альтернативы это: GraphQL, JSON-PURE и ODATA.

Так скажи мне сейчас, как выглядит отдых?

В очень широких условиях вы спрашиваете сервер для определенных данных или попросите его сохранить некоторые данные, и сервер отвечает на запросы.

В условиях программирования есть конечная точка (URL), который ждет сервер, чтобы получить запрос. Мы подключаемся к этой конечной точке и отправляем некоторые данные о нас (запоминание, остальное нестандартное, никакие данные о запросе не сохраняются), и сервер отвечает правильным ответом.

Слова скучны, позвольте мне дать вам демонстрацию. Я буду использовать Postman, чтобы показать вам запрос и ответ:

Возвращенные данные в JSON (Object Outation JavaScript) и могут быть доступны напрямую.

Здесь https://official-joke-api.appspot.com/random_joke называется конечной точкой API. На этой конечной точке будет слушать сервер для запросов, таких как мы сделали.

Анатомия отдыха:

Хорошо, так что теперь мы знаем, что данные могут быть запрошены клиентом, и сервер ответит соответствующим образом. Давайте рассмотрим глубже в том, как сформирован запрос.

Конечная точка Я уже говорил вам об этом. Для повышения квалификации это URL, где сервер отдыха прослушивает.
Метод : Ранее я написал, что вы можете либо запросить данные или изменять его, но как сервер знает, какую операцию хочет выполнить клиент? Отдых реализует несколько «методов» для различных типов запроса, следующие наиболее популярны: – Получить : Получить ресурс с сервера. – Пост : Создайте ресурс на сервер. – Патч или Поставить : Обновите существующий ресурс на сервере. – Удалить : Удалите существующий ресурс с сервера.
Заголовки : Дополнительные детали, предоставленные для связи между клиентом и сервером (помните, отдых нестандартно). Некоторые из общих заголовков: Запрос: – хозяин : IP клиента (или откуда возникла запрос) – Язык принимает : язык понятно клиентом – пользовательский агент : Данные о клиенте, операционной системе и поставщике Ответ : – Статус : Состояние запроса или HTTP-кода. – Content-Type Тип ресурса, отправленного сервером. – Set-cookie : устанавливает cookies по серверу
Данные : (Также называется кузовом или сообщением) содержит информацию, которую вы хотите отправить на сервер.

Достаточно с деталями – покажи мне код.

Давайте начнем кодировать службу отдыха в узле. Мы будем реализовывать все, что мы узнали выше. Мы также будем использовать ES6 +, чтобы написать наш сервис в.

Убедитесь, что у вас установлены Node.js и Узел и NPM доступны на вашем пути. Я буду использовать узел 12.16.2 и NPM 6.14.4.

Создать каталог red-service-node и CD в это:

mkdir rest-service-node
cd rest-service-node

Инициализировать проект узла:

npm init -y

-Я Флаг пропускает все вопросы. Если вы хотите заполнить весь вопросник, просто запустите NPM init Отказ

Давайте установим некоторые пакеты. Мы будем использовать рамки ExpressJS для разработки сервера отдыха. Запустите следующую команду, чтобы установить его:

npm install --save express body-parser

Что такое Тело-парсер там? Express, по умолчанию не способен обрабатывать данные, отправленные через Post Proke. JSON. Тело-парсер позволяет выразить преодоление этого.

Создайте файл под названием server.js и добавьте следующий код:

const express = require("express");
const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.json());

app.listen(5000, () => {
  console.log(`Server is running on port 5000.`);
});

Первые две линии импортируют экспресс и парсер.

Третья строка инициализирует Express Server и устанавливает его на переменную, называемую приложение Отказ

Линия, app.use (bodyparser.json ()); Инициализирует плагин для тела.

Наконец, мы устанавливаем наш сервер для прослушивания порта 5000 для запросов.

Получение данных с сервера отдыха:

Чтобы получить данные с сервера, нам нужен Получить запрос. Добавьте следующий код перед app.listen :

const sayHi = (req, res) => {
  res.send("Hi!");
};

app.get("/", sayHi);

Мы создали функцию Сайхи который принимает два параметра req и res (Я объясню позже) и отправляет «Привет!» как ответ.

app.get () Использует два параметра, путь маршрута и функции для вызова, когда путь запрашивается клиентом. Итак, последняя строка переводится на: Hey Server, слушать запросы на «/» (думайте на дому) и позвоните в Сайхи Функция, если запрос сделан.

app.get Также дает нам Запрос Объект, содержащий все данные, отправленные клиентом и A ответ Объект, который содержит все методы, с которыми мы можем ответить на клиента. Хотя они доступны как параметры функций, общее соглашение об именовании предлагает нам назвать их res для ответ и req для Запрос Отказ

Достаточно болтовни. Давайте подожним сервер! Запустите следующий сервер:

node server.js

Если все успешно, вы должны увидеть сообщение на консоли, говоря: Сервер работает на порту 5000.

Примечание. Вы можете изменить порт на любой номер, который вы хотите.

Откройте свой браузер и перейдите к http://localhost: 5000/ И вы должны увидеть что-то вроде этого:

Там вы идете! Ваш первый Получить Запрос был успешным!

Отправка данных на сервер покоя:

Как мы обсуждали ранее, давайте настроимся, как мы можем реализовать Пост запрос на наш сервер. Мы будем отправлять в два числа, и сервер вернет сумму чисел. Добавьте этот новый метод ниже app.get :

app.post("/add", (req, res) => {
  const { a, b } = req.body;
  res.send(`The sum is: ${a + b}`);
});

Здесь мы будем отправлять данные в формате json, как это:

{
    "a":5,
    "b":10
}

Давайте перейдем по коду:

На строке 1 мы называем. пост () Способ Expressjs, который позволяет серверу прослушивать Пост Запросы. Эта функция принимает те же параметры, что и .get () метод. Маршрут, который мы проезжаем, это /Добавить Так можно получить доступ к конечной точке как http://ваш IP-адрес: порт/Добавить или в нашем случае localhost: 5000/Добавить Отказ Мы вкладываем нашу функцию вместо того, чтобы написать функцию в другом месте.

В строке 2 мы использовали немного синтаксиса ES6, а именно, деструктурируют объект. Независимо от того, какие данные мы отправляем через запрос, хранятся и доступна в Тело из req объект. По сути, мы могли бы заменить линию 2 с чем-то вроде:

const num1 = req.body.a;
const num2 = req.body.b;

В строке 3 мы используем Отправить () Функция res объект для отправки результата суммы. Опять же, мы используем шаблонные литералы от ES6. Теперь, чтобы проверить это (используя почтальон):

Итак, мы отправили данные 5 и 10 как А и B используя их как тело. Почтальон прилагает эти данные к запросу и отправляет его. Когда сервер получает запрос, он может анализировать данные из req .body , как мы сделали в коде выше. Результат показан ниже.

Хорошо, последний код:

const express = require("express");
const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.json());

const sayHi = (req, res) => {
  res.send("Hi!");
};

app.get("/", sayHi);

app.post("/add", (req, res) => {
  const { a, b } = req.body;
  res.send(`The sum is: ${a + b}`);
});

app.listen(5000, () => {
  console.log(`Server is running on port 5000.`);
});

Клиент отдыха:

Хорошо, мы создали сервер, но как мы доступм к нему с нашего сайта или WebApp? Здесь остальные клиентские библиотеки будут пригодны.

Мы будем строить веб-страницу, которая будет содержать форму, где вы можете ввести два числа, и мы будем отображать результат. Давайте начнем.

Во-первых, давайте изменим server.js немного:

const path = require("path");
const express = require("express");
const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.json());

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "index.html"));
});

app.post("/add", (req, res) => {
  const { a, b } = req.body;
  res.send({
    result: parseInt(a) + parseInt(b)
  });
});

app.listen(5000, () => {
  console.log(`Server is running on port 5000.`);
});

Мы импортировали новый пакет путь , который предоставляется узлом, для манипулирования кроссплатформой путь. Далее мы изменили Получить Запрос на «/» и использовать другую функцию, доступную в res , т.е. SendFile , что позволяет нам отправлять любой тип файла в качестве ответа. Итак, всякий раз, когда человек пытается перейти к «/», они получат наши index.html страница.

Наконец, мы изменили наши app.post Функция, чтобы вернуть сумму как JSON и конвертировать оба А и B целые числа.

Давайте создадим HTML-страницу, я назову это index.html , с каким-то основным стилем:




  
    
    
    REST Client
  
  
  
    
      Simple POST Form
      
      
        Number 1:
        
        Number 2:
        
        
      
      Click Add!

Давайте добавим Сценарий Тег непосредственно перед закрытием тега тела, поэтому нам не нужно поддерживать .js файл. Мы начнем с прослушивания Отправить Событие и позвоните в функцию соответственно:

Сначала нам нужно предотвратить обновление страницы, когда нажата кнопка «Добавить». Это можно сделать с помощью PreventDefault () функция. Затем мы получим значение входов в этом мгновенном режиме:

function sendData(e) {
    e.preventDefault();
    const a = document.querySelector("#num1").value;
    const b = document.querySelector("#num2").value;
}

Теперь мы сделаем звонок на сервер как эти значения А и B Отказ Мы будем использовать Fetch API Встроенный для каждого браузера для этого.

Fetch принимает два входа, конечную точку URL и объект json запроса и возвращает Обещание Отказ Объясняя их здесь выйдут здесь, поэтому я оставлю это для вас.

Продолжайте внутри senddata () Функция:

fetch("/add", {
        method: "POST",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            a: parseInt(a),
            b: parseInt(b)
        })
    })
    .then(res => res.json())
    .then(data => {
        const {
            result
        } = data;
        document.querySelector(
            ".result"
        ).innerText = `The sum is: ${result}`;
    })
    .catch(err => console.log(err));

Сначала мы передаем относительный URL конечной точки в качестве первого параметра для извлекать Отказ Далее мы передаем объект, который содержит метод, который мы хотим использовать для использования для запроса, который является Пост в таком случае.

Мы также проезжаем Заголовки , который предоставит информацию о типе данных, которые мы отправляем ( тип контента ) и тип данных, которые мы принимаем как ответ ( Принять ).

Далее мы пройдем Тело Отказ Помните, что мы набрали данные как JSON, используя почтальон? Мы делаем себя похожему здесь. Поскольку Express сделки со строкой в качестве ввода и обрабатывает ее в соответствии с предоставленным типа контента, нам нужно преобразовать нашу полезную нагрузку JSON в строку. Мы делаем это с Json.stringify () Отказ Мы немного очень осторожны и разбираем ввод в целые числа, поэтому он не запутает наш сервер (поскольку мы не реализовали какую-либо проверку типа данных).

Наконец, если обещание (возвращено Fetch) решает, мы получим этот ответ и преобразую его в JSON. После этого мы получим результат от данные ключ возвращен ответом. Тогда мы просто отображаем результат на экране.

В конце, если обещание отклоняется, мы будем отображать сообщение об ошибке на консоли.

Вот окончательный код для index.html :




  
    
    
    REST Client
  
  
  
    
      Simple POST Form
      
      
        Number 1:
        
        Number 2:
        
        
      
      Click Add!

Я повернул Маленькое приложение на глюк для вас, чтобы проверить.

Заключение:

Таким образом, в этом посте мы узнали о архитектуре покоя и анатомии по запросам отдыха. Мы проводим путь, создав простой сервер отдыха, который обслуживает Получить и Пост Запросы и создают простую веб-страницу, которая использует клиент для отдыха для отображения суммы двух номеров.

Вы можете продлить это для оставшихся типов запросов и даже реализовать полнофункциональное обратное приложение CRUD.

Я надеюсь, что вы узнали что-то от этого. Если у вас есть какие-либо вопросы, не стесняйтесь обращаться ко мне через Twitter! Счастливое кодирование!