Зачем заменять node-fetch?
Глобальные конфигурации, например базовые URL-адреса 😩
С помощью axios вы можете установить глобальные конфигурации, такие как базовые URL-адреса. Это упрощает управление вашими HTTP-запросами, особенно если у вас есть несколько конечных точек для вызова.
Выделенные методы 😟
Axios предлагает специальные методы для создания HTTP-запросов, таких как post и get. Это упрощает выполнение HTTP-запросов без необходимости указывать метод запроса каждый раз, когда вы делаете запрос.
Поддержка перехватчиков 😮
Axios поддерживает перехватчики, что позволяет изменять HTTP-запросы и ответы до их отправки или получения. Это полезно, когда вам нужно добавить пользовательские заголовки или выполнить аутентификацию.
Обработка ошибок немного странная 😏
Axios имеет лучший механизм обработки ошибок, чем node-fetch. Axios генерирует исключение для всех кодов состояния, кроме 2XX, что упрощает обработку ошибок в вашем приложении.
Теперь, когда вы знаете, почему axios является лучшей альтернативой node-fetch, давайте посмотрим, как вы можете заменить node-fetch на axios в своих приложениях Node.js.
Вот ваше руководство по замене node-fetch на axios. ⛄️
Все подробности ниже относятся к следующей среде
Node Version > 16 node-fetch version = 2.0.0 axios version > 1.3.4
1. Отправка запроса с разными типами контента
тип контента:application/x-www-form-urlencoded
Мы будем использовать URLSearchParamsдля построения данных формы. В последней версии axios вы можете напрямую указать объект javascript, и он автоматически обработает преобразование, когда указан тип контента application/x-www-form-urlencoded. Это полезно по сравнению с работой со строковыми шаблонами.
//node-fetch
const loginResponse = await fetch("https://login.com", {
credentials: "include",
headers: {
"cache-control": "no-cache",
"content-type": "application/x-www-form-urlencoded",
},
body: `user=${username}&pass=${password}`,
method: "POST",
redirect: "manual",
})
//--------------------------------------------------------------------------
//axios
const loginResponse = await axios.post(
"https://login.com",
new URLSearchParams({
user: "username",
pass: "password",
}),
{
headers: {
"content-type": "application/x-www-form-urlencoded",
},
}
);
тип контента:application/json
Вам больше не нужно JSON.stringify(..) тело запроса POST
//node-fetch
const response = await fetch(
`https://${process.env.AUTH0_DOMAIN}/oauth/token`,
{
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({
grant_type: "client_credentials",
client_id: process.env.AUTH0_KEY,
client_secret: process.env.AUTH0_SECRET,
audience: `https://${process.env.AUTH0_DOMAIN}/api/v2/`,
}),
}
);
//--------------------------------------------------------------------------
//axios
const response = await axios.post(
`https://${process.env.AUTH0_DOMAIN}/oauth/token`,
{
grant_type: "client_credentials",
client_id: process.env.AUTH0_KEY,
client_secret: process.env.AUTH0_SECRET,
audience: `https://${process.env.AUTH0_DOMAIN}/api/v2/`,
},
{
headers: { "content-type": "application/json"
});
2. Никакие исключения не выбрасываются с помощью node-fetch
Приходится вручную проверять объект res на наличие всех кодов состояния. С axios исключение будет выдано для всех кодов состояния, кроме 2XX
//node-fetch
let res = await fetch(`https://${domain}/api/v2/users/${userId}`,
{ method: "GET",
headers: {
Authorization: `Bearer ${managementToken}`,
"content-type": "application/json",
},
});
if (!res.ok) {
throw new BadRequest(res.statusText);
}
//--------------------------------------------------------------------------
//axios
try {
await axios.delete(`https://${domain}/api/v2/users/${userId}`, {
headers: {
Authorization: `Bearer ${managementToken}`,
"content-type": "application/json",
},});
} catch ({ message }) {
throw new BadRequest(message);
}
3. Пограничный случай для редиректов
Если вы работаете с файлами cookie, этот трюк может сэкономить вам массу времени. ⏰
302 является исключением с axios , нам нужно обработать это явно, используя доступные параметры конфигурации. Мы будем использовать функцию validateStatus для ручного переопределения status code, которые считаются действительными.
Max redirects можно использовать для ограничения количества перенаправлений, которым будет следовать ваш запрос (это доступно только в узле).
//node-fetch
const loginResponse = await fetch("https://login.com", {
credentials: "include",
headers: {
"content-type": "application/x-www-form-urlencoded",
},
method: "POST",
redirect: "manual",
});
//--------------------------------------------------------------------------
//axios
const loginResponse = await axios.post(
"https://login.com",
{
headers: {
"content-type": "application/x-www-form-urlencoded",
},
maxRedirects: 0, //we need values for cookies for next request
validateStatus: function (status) {
return status >= 200 && status <= 302;
},
}
);
4. Выделенные методы по сравнению с общим единственным методом вызова API
Одно из заметных различий между node-fetch и axios заключается в том, как они обрабатывают HTTP-запросы. С node-fetch вам необходимо предоставить «метод» запроса при каждом вызове выборки. С другой стороны, axios избавляет вас от проблем, предлагая специальные вызовы методов для ваших нужд. Например, вы можете использовать axios.post() для запроса POST, axios.get() для запроса GET и так далее.
Вот пример того, как вы можете использовать специальные методы с axios:
//node-fetch
const response = await fetch(
`https://${process.env.AUTH0_DOMAIN}/oauth/token`,
{ method: "POST",
headers: { "content-type": "application/json" }, ...}
const response = await fetch(
`https://${process.env.AUTH0_DOMAIN}/oauth/token`,
{ method: "GET" ...}
//--------------------------------------------------------------------------
//axios
const response = await axios.post(
`https://${process.env.AUTH0_DOMAIN}/oauth/token`,
{
headers: { "content-type": "application/json" },
// other config options
}
);
const response = await axios.get(
`https://${process.env.AUTH0_DOMAIN}/oauth/token`,
{
// other config options
}
);
5. Различные имена переменных для конфигураций
Еще одно различие между node-fetch и axios заключается в именах переменных, которые они используют для конфигураций. Хотя список длинный, вот несколько часто используемых примеров:
credentials: "include"в объекте инициализацииnode-fetchссылается наwithCredentials: trueв объекте конфигурацииaxios.redirect: "manual"в объекте инициализацииnode-fetchссылается наmaxRedirects: 0в объекте конфигурацииaxios.
6. Разница в структуре объекта ответа/ошибки
С node-fetch вам нужно явно сгенерировать ответ, используя метод .json() или .text(). Например:
const response = await fetch('https://${process.env.AUTH0_DOMAIN}/oauth/token')
if (!response.ok) {
throw new Error('Failed to fetch data')
}
const data = await response.json()
С axios объекты ответов и ошибок более согласованны и с ними легче работать. Функция axios возвращает обещание, которое разрешается с помощью объекта ответа. Если есть ошибка, он отклоняется с объектом ошибки.
try {
const response = await axios.get('https://${process.env.AUTH0_DOMAIN}/oauth/token')
const data = response.data
} catch (error) {
console.error(error)
}
Заключение
Таким образом, хотя node-fetch является хорошей библиотекой для создания HTTP-запросов в Node.js, axios предлагает более продвинутые функции и лучший опыт для разработчиков. С axios вы получаете глобальные конфигурации, специальные методы, поддержку перехватчиков и улучшенную обработку ошибок, что может сэкономить вам много времени и усилий.
Если вы в настоящее время используете node-fetch и хотите перейти на axios, процесс миграции относительно прост. Просто не забудьте обновить свой код, чтобы использовать синтаксис axios и воспользоваться его функциями.
Думаешь, я что-то упустил? Дайте мне знать в комментариях ниже👇
Это моя первая статья, поддержите меня аплодисментами 👏 🙌
