Привет, ребята, надеюсь, у вас все будет хорошо. Сегодня мы собираемся узнать, что такое Fetch API и axios в javascript на реальных примерах. Итак, давайте сначала разберемся, что такое API.
Что такое API
API означает интерфейс прикладного программирования. Это помогает одному приложению взаимодействовать и обмениваться данными с другим приложением.
Теперь, когда мы знаем, что такое API, вот что нам нужно знать, прежде чем двигаться дальше.
- При отправке запроса к API у нас обычно есть URL, к которому мы делаем запросы.
- Нам нужно указать метод HTTP перед выполнением запроса, т. е. GET, POST и т. д.
- нам нужно передать некоторые заголовки, чтобы получить отформатированный ответ, то есть JSON, обычный текст и т. д.
- Такие методы, как POST, ожидают, что мы также передадим тело.
- Некоторые API также требуют, чтобы мы также передавали строку запроса.
Также прочтите:Упрощенные функции высшего порядка JavaScript — map(), reduce() и filter()
Теперь давайте перейдем к основной теме и посмотрим, что такое Fetch API и Axios в javascript простыми словами.
Получить API в JavaScript
Fetch — это API JavaScript на основе обещаний для выполнения асинхронных HTTP-запросов.
это простой, мощный и гибкий способ получения или отправки данных с/на сервер.
Даже если название подразумевает, что вы можете только «извлекать» данные, на самом деле вы можете делать запросы любого типа: GET, POST, PUT, PATCH, DELETE.
Каждый вызов fetch возвращает обещание. Это позволяет вам легко обрабатывать данные, которые вы получаете, и ошибки, которые вы можете получить.
Чтобы сделать запрос, мы используем метод fetch(). Он принимает один обязательный аргумент, путь к ресурсу, который мы хотим получить, обычно это URL.
Выполнение запроса GET с помощью API выборки
допустим, нам нужно получить список пользователей с сервера:
fetch('https://jsonplaceholder.typicode.com/users') .then(response => response.json()) .then(data => console.log(data)) .catch(err => console.log(err))Мы вызываем fetch() и передаем URL-адрес запроса в качестве параметра. Поскольку мы знаем, что fetch вернет обещание, мы используем .then() для доступа к ответу сервера. Объект ответа, возвращаемый в строке 2, содержит все данные ответа, включая заголовки, код состояния, сообщение о состоянии.
Поскольку мы знаем, что ожидаем ответа в формате JSON, мы можем вызвать метод .json(), чтобы получить доступ к фактическим данным в связанном вызове .then().
Мы также можем использовать блок .catch() для обработки возможных ошибок, выдаваемых сервером.
Также прочтите: Последние функции JavaScript, которые должен знать каждый веб-разработчик
Возможные типы ответов
Не все вызовы будут возвращать ответы JSON, поэтому полезно знать, что объект ответа, возвращаемый fetch, имеет несколько методов, которые вы можете использовать:
// creates a clone of the response response.clone() // creates a new response with a different URL response.redirect() // returns a promise that resolves with an ArrayBuffer response.arrayBuffer() // returns a promise that resolves with a form data object response.formData() // returns a promise that resolves with a blob response.blob() //returns a promise that resolves with a string response.text() //returns a promise that resolves with JSON response.json()Доступ к информации об ответе
Помимо методов, которые мы используем для управления данными в нашем ответе, у нас также есть доступ к некоторым другим полям, которые могут содержать полезную информацию:
fetch('https://jsonplaceholder.typicode.com/posts') .then(response => { // accessing response headers console.log(response.headers.get('Clcontent-type')) // the HTTP response status code console.log(response.status) // true if status code is returned 200 and 299 console.log(response.ok) // status message of the response e.g. 'Not Found' console.log(response.statusText) // true if there was a redirect console.log(response.redirect) // the response type (e.g. 'basic', 'cors') console.log(response.type) // the full url of the request console.log(response.url) })Выполнение запроса на запись с помощью API выборки
Вы можете выполнять запросы POST, PUT или PATCH с помощью выборки, добавив второй параметр, объект, который будет содержать необходимые данные. Вот как:
const user = { username: 'Nasyx.Rakeeb', password: 'dontknow' } const requestData = { method: "POST", headers: { "Content-Type": "application/json", }, fetch('http://localhost:8000/users', requestData) .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.error('could not save'))Готово 👏🥳 Вы только что отправили HTTP-запрос POST на сервер с помощью fetch!
Выполнение запроса на удаление с помощью Fetch API
Вы также можете удалить ресурсы с помощью fetch, используя DELETE в качестве метода, например:
const requestData = { method: "DELETE", headers: { "Content-Type": "application/json", "Accept": "application/json" } } fetch('http://localhost:8000/users/6', requestData) .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.log('Could not delete'))Здесь мы добавляем идентификатор пользователя в URL-адрес, чтобы сервер знал, какого пользователя мы хотим удалить, и сделал запрос.
Теперь вы более чем готовы работать с API, используя выборку JavaScript.
Также читайте: Лучшие расширения VSCode, которые вы должны рассмотреть в 2022 году
Аксиомы в JavaScript
Axios — это HTTP-клиент на основе обещаний, который работает как в браузере, так и в среде NodeJS.
Добавьте следующую ссылку сценария CDN в свой index.html.
Запрос с помощью Axios
Вот что мы делаем, чтобы выполнить запрос с помощью axios.
Мы отправим запрос на API https://icanhazdadjoke.com/. Он принимает два заголовка Content-Type и Accept.
Передача запросов с запросами
Давайте посмотрим, как мы можем передать строку запроса с помощью axios в API.
В этом примере мы будем использовать конечную точку Agify API https://api.agify.io/.
Здесь мы передадим имя в качестве запроса, чтобы предсказать их возраст.
Давайте перейдем к этому
axios.get('https://api.agify.io/', { headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, params": {name: 'Nasyx'} }) .then(res => console.log(res.data)) .catch(err => console.log(err)Также прочтите:Что такое стек вызовов в Javascript и почему это важно
POST-запрос с Axios
Здесь мы увидим, как мы можем передать запрос POST с помощью Axios по телу. мы будем использовать API https://reqres.in/
axios.post('https://reqres.in/api/users', { "name": "Nasyx", "job": "developer" } ) .then(res => console.log(res.data)) .catch(err => console.log(err))Запрос PATCH с Axios
Теперь давайте посмотрим, как мы можем передать запрос PATCH с помощью Axios вместе с телом. Мы будем использовать API https://reqres.in/
axios.patch('https://reqres.in/api/users/2', { "name": "Nasyx", "job": developer" } ) .then(res => console.log(res.data)) .catch(err => console.log(err))PUT-запрос с Axios
Теперь давайте посмотрим, как передать запрос PUT с помощью Axios вместе с телом. Здесь мы будем использовать тот же предыдущий API https://reqres.in/.
axios.put('https://reqres.in/api/users/2', { "name": "Nasyx", "job": "developer" } ) .then(res => console.log(res.data)) .catch(err => console.log(err))УДАЛИТЬ запрос с помощью Axios
Здесь мы увидим, как сделать запрос DELETE с помощью Axios вместе с телом.
Мы будем использовать тот же API https://reqres.in/
axios.delete('https://reqres.in/api/users/2') .then(res => console.log(res)) .catch(err => console.log(err))Ссылки по теме
Вот и все для этого поста, ребята, я попытался объяснить выборку API и axios в javascript простыми словами, чтобы новичок также мог понять эту статью. Надеюсь, сегодня вы узнали что-то новое, если да, не забудьте поделиться, а если у вас есть какие-либо сомнения, раздел комментариев открыт ниже.
Хотите больше контента, подобного этому нажмите здесь
Первоначально опубликовано на https://codipher.com 21 марта 2022 г.
