Что такое REST (передача репрезентативного состояния)?
Когда вызывается RESTful API, сервер передает клиенту представление о состоянии запрошенного ресурса.
Представление состояния может быть в формате JSON, и, вероятно, для большинства API это действительно так. (Он также может быть в формате XML или HTML)
Что делает сервер?
Когда вы, клиент, вызываете один из его API, это зависит от двух вещей, которые вам нужно предоставить серверу:
- Идентификатор интересующего вас ресурса. Это URL-адрес ресурса, также известный как конечная точка. На самом деле URL означает унифицированный указатель ресурса.
– операция, которую сервер должен выполнять с этим ресурсом, в форме метода HTTP или глагола. Распространенными методами HTTP являются GET, POST, PUT и DELETE.
Как это работает?
API-интерфейсы REST взаимодействуют через HTTP-запросы для выполнения стандартных функций базы данных, таких как создание, чтение, обновление и удаление записей (также известных как CRUD) в ресурсе. Например…
– REST API будет использовать запрос GET для извлечения записи,
– запрос POST для создания записи,
– запрос PUT для обновления записи,
– и запрос DELETE для удаления. один.
Все методы HTTP могут использоваться в вызовах API. Хорошо спроектированный REST API похож на веб-сайт, работающий в веб-браузере со встроенными функциями HTTP.
Настройка проекта
1. Запустите этот код в командной строке, чтобы создать новое приложение для реагирования.
npx create-react-app rest-api
1а. компакт-диск в папку приложения
cd rest-api
1б. Запустить запуск npm
Теперь ваш проект запущен и работает. Приступаем к кодированию!
Структура папок
На корневом уровне мы будем хранить следующие файлы.
- Index.JS
- App.JS
- App.CSS
- Index.CSS
Компонент приложения
Очистите свой App.js, удалив все в div, чтобы он выглядел так.
import React from ‘react’;
import ‘./App.css’;
function App(){
return (
<div className=”App”>
Hello World!
</div>
)
}
export default App
Получение данных API
Теперь запишем данные из [QuotesApi](https://type.fit/api/quotes) с помощью хука useEffect.
import ‘./App.css’;
import React,{useEffect} from ‘react’;
export default function App() {
useEffect(() => {
}, []);
return (
<div className=”App”>
</div>
);
}
**Укажите свой URL**
useEffect(() => {
const url = “https://type.fit/api/quotes";
}, []);
Создайте асинхронную функцию
Затем создайте асинхронную функцию для получения наших данных. Для этого варианта использования функция должна будет подождать после получения данных (наше обещание), прежде чем продолжить.
const fetchData = async () => {
try {
const res = await fetch(url);
const json = await res.json();
console.log(json);
} catch (err) {
console.log(“error”, err);
}
};
Поместите функцию fetchData в хук useEffect и не забудьте вызвать ее именно так.
useEffect(() => {
const url = “https://type.fit/api/quotes";
const fetchData = async () => {
try {
const res = await fetch(url);
const json = await res.json();
console.log(json);
} catch (err) {
console.log(“error”, err);
}
};
fetchData();
}, []);
Только что созданная функция заключена в оператор try…catch для перехвата ошибок и вывода их на консоль. Зачем мы это делаем? Чтобы облегчить отладку и предотвратить неожиданный сбой приложения.
Проверьте свой оператор console.log и посмотрите, получаете ли вы правильные данные из API.
Как получить данные из API?
Для этого нам нужно будет импортировать useState из реакции и определить его.
import React,{useEffect, useState} from ‘react’;
setQuotes(json);
И тогда ваше возвращаемое тело должно выглядеть так:
return (
<table className=”App”>
<tr>
<th>Text</th>
<th>Author</th>
</tr>
{quotes.map(({ author, text }, index) => (
<tr key={index}>
<th>{text}</th>
<th>{author}</th>
</tr>
))}
</table>
);
Теперь давайте соберем все вместе вместе со стилями, чтобы завершить проект!
import ‘./App.css’;
import React,{useEffect, useState} from ‘react’;
export default function App() {
const [quotes, setQuotes] = useState([]);
useEffect(() => {
const url = “https://type.fit/api/quotes";
const fetchData = async () => {
try {
const res = await fetch(url);
const json = await res.json();
console.log(json);
setQuotes(json);
} catch (err) {
console.log(“error”, err);
}
};
fetchData();
}, []);
return (
<table className=”App”>
<tr>
<th>Text</th>
<th>Author</th>
</tr>
{quotes.map(({ author, text }, index) => (
<tr key={index}>
<th>{text}</th>
<th>{author}</th>
</tr>
))}
</table>
);
}
Снова проверьте консоль и просмотрите данные, которые вы получаете от API.
Это будет Выход.
Выглядит великолепно!
Большое спасибо, что дочитали до конца, хорошего дня!
