HTTP-запрос Fetch против Axios

Несколько месяцев назад я работал над проектом, который начал с React JS. В официальной документации React рекомендуется fetch api для выполнения http-запроса. Поэтому я сразу интегрировал свой API с fetch api. Время от времени я сталкивался с множеством проблем с fetch api.

Проблемы с Fetch API

Ошибка передачи с API получения.
Получение ответа api за 2 шага.
Функция тайм-аута недоступна.
Отмена запроса.
Fetch не поддерживает загрузку.
По умолчанию файлы cookie отсутствуют

В первые месяцы мне удалось написать код для решения двух начальных проблем, но позже не удалось решить с помощью fetch api. По прошествии 4–5 месяцев после реализации проекта нам потребовалось добавить функцию тайм-аута и отмены запроса. поэтому я начал искать лучшие варианты интеграции с API. Наконец, я получил Axios, который обеспечивал всю необходимую функциональность, упомянутую выше. Давайте сначала обсудим, как вы можете решить первые две проблемы с fetch api.

Ошибка при обработке API получения:

Очень простой запрос API с использованием fetch выглядит так:

fetch("http://httpstat.us/500")
    .then(function() {
        console.log("ok");
    }).catch(function() {
        console.log("error");
    });

Теперь вы можете ожидать, что приведенный выше код будет записывать «ok», если api содержит успешный код состояния HTTP, а журнал «error», если api содержит код состояния HTTP ошибки. Но так было, когда вы работали в мире jQuery. В запросе на выборку вы получите сообщение об ошибке только в том случае, если обнаружится сетевая ошибка, а во всех остальных случаях вы получите сообщение «ОК».

Хорошая новость заключается в том, что fetch предоставляет простой ok флаг, который указывает, находится ли код состояния ответа HTTP в успешном диапазоне или нет. Например, следующий код регистрирует «Ошибка: внутренняя ошибка сервера (…)»:

fetch("http://httpstat.us/500")
    .then(function(response) {
        if (!response.ok) {
            throw Error(response.statusText);
        }
        return response;
    }).then(function(response) {
        console.log("ok");
    }).catch(function(error) {
        console.log(error);
    });

Чтобы этот код оставался СУХИМ и пригодным для повторного использования, вы, вероятно, захотите создать общую функцию обработки ошибок, которую можно использовать для всех ваших fetch() вызовов. Следующий код преобразовывает обработку ошибок в функцию handleErrors():

function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response;
}

fetch("http://httpstat.us/500")
    .then(handleErrors)
    .then(function(response) {
        console.log("ok");
    }).catch(function(error) {
        console.log(error);
    });

Вы также можете использовать стрелочные функции ES6, чтобы сделать форматирование обратного вызова менее подробным:

function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response;
}
fetch("http://httpstat.us/500")
    .then(handleErrors)
    .then(response => console.log("ok") )
    .catch(error => console.log(error) );

2. Получение ответа API за 2 шага:

Давайте рассмотрим базовый вызов API выборки, как показано ниже:

fetch("http://httpstat.us/500")
    .then(function(response) {
        if (!response.ok) {
            throw Error(response.statusText);
        }
        return response;
    }).then(function(response) {
        console.log(response);
    }).catch(function(error) {
        console.log(error);
    });

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

Чтобы получить эти данные, вы должны сначала передать их в .json (), а затем вы сможете их увидеть.

fetch("http://httpstat.us/500")
    .then(function(response) {
        if (!response.ok) {
            throw Error(response.statusText);
        }
        return response.json();
    }).then(function(response) {
        console.log(response);
    }).catch(function(error) {
        console.log(error);
    });

Теперь это данные из API, которые нам нужны.

Итак, мы решили первые две проблемы, но вы по-прежнему не можете использовать выборку, если вам нужны такие функции, как отмена запроса, тайм-аут запроса и ход загрузки.

fetch api - отличный шаг в правильном направлении для получения нативного http-запроса в ES6. Но пока, если вы его используете, вам нужно применить некоторые нюансы, чтобы он работал в соответствии с вашими требованиями.

Чтобы решить все свои проблемы, я нахожу Axios на помощь. Axios - это HTTP-клиент на основе Promise для браузера и node.js.

3. По умолчанию файлы cookie не используются:

Fetch не отправляет файлы cookie с вызовами API по умолчанию. Чтобы включить это, вам нужно добавить следующее:

fetch(url, {
  credentials: "same-origin"
}).then(...).catch(...);

Преимущества использования Axios:
1. Преобразователи: позволяют выполнять преобразования данных до выполнения запроса или после получения ответа.

2. Перехватчики: позволяют полностью изменить запрос или ответ (а также заголовки). также выполнять асинхронные операции до того, как будет сделан запрос или до того, как Promise установит.

3. Встроенная защита от XSRF.

4. Сделайте XMLHttpRequests из браузера и http запросы из node.js.

5. Отмена запросов и тайм-аут.

Простой запрос POST с использованием Axios выглядит так:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

В приведенном выше примере вы получите ожидаемый json без его дальнейшей обработки, как в случае с API выборки. Вы можете прочитать документацию Axios для получения дополнительной информации.

Ссылки:

Https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5

HTTP-запрос Fetch против Axios

Вопросы по теме