Как лучше всего вызвать REST API из JavaScript?

Вы когда-нибудь задумывались, как лучше и чище делать вызовы JavaScript REST API? А как насчет большого проекта, где вы делаете их сотни?

У меня слишком поздно возник этот вопрос в моих проектах, после того как было написано много кода. Гораздо лучше заранее знать, какой метод выбрать, это доставит вам гораздо меньше головной боли позже.

Как вы, возможно, знаете, существует множество вариантов вызова API из JavaScript. Некоторые из них — XMLHttpRequest, jQuery, fetch и так далее. Я собираюсь рассказать здесь о методе fetch, потому что в нашем коде он выглядит чище.

Использовать fetch очень просто. HTTP-запрос обычно выглядит так:

fetch(‘https://jsonplaceholder.typicode.com/todos/1’)
  .then(response => response.json())
  .then(json => console.log(json));

Как видите, сделать запрос на получение довольно просто. Но что происходит, когда мы хотим сделать запрос post? Посмотрим:

fetch(‘https://jsonplaceholder.typicode.com/todos/1’,
    {method: “POST”, body: JSON.stringify(data)})
  .then(response => response.json())
  .then(json => console.log(json));

Вещи уже начинают выглядеть довольно уродливо. Подобные методы put и delete будут выглядеть одинаково.

Хорошо, нам нужно что-то с этим сделать. Во-первых, давайте представим, что мой базовый URL-адрес rest API имеет вид https://my-url/v1/, и если я хочу получить всех пользователей с сервера, мне нужно будет позвонить https://my-url/v1/users. Как видите, я всегда буду использовать https://my-url/v1/ в своем коде. Итак, если мне придется сделать сотни запросов, мой код будет загрязнен этой строкой.

Кроме того, что произойдет, если в будущем я сделаю обновление своего приложения, и мне нужно будет также обновить мой базовый URL-адрес с v1 до v2. Мне придется искать везде в моем приложении и заменять эти строки.

Первый вариант

Мой первый вариант — создать main.js, который я буду импортировать в каждый файл .js, и в этом файле я объявлю свою базовую строку URL. Давайте посмотрим, как это будет выглядеть:

main.js

const baseUrl = ‘https://my-url/v1/’;

users.js

fetch(baseUrl + ‘users’)
  .then(response => response.json())
  .then(json => console.log(json));

Сейчас он выглядит лучше, но я все равно буду дублировать код и иметь константы .then(…) и baseUrl везде в моем проекте. Итак, я хотел бы сделать что-то более универсальное. Кроме того, что произойдет, если я захочу добавить некоторые заголовки аутентификации в свои запросы. Код будет выглядеть так:

const baseUrl = ‘https://my-url/v1/’;
const authHeaders = {Authorization: ‘Bearer ‘ +
  $.cookie(‘jwtToken’), ‘Content-Type’: ‘application/json’};
fetch(baseUrl + ‘users’, {method:’GET’, headers: authHeaders)
  .then(response => response.json())
  .then(json => console.log(json));

Как видите, код может очень быстро стать неприятным, так как мне нужно больше опций.

Лучший вариант

Лучший вариант, который работает для меня, это следующий. В моем файле main.js я бы определил четыре метода для put,post,get и delete и использовал их непосредственно для window повсюду в моем коде. Итак, в моем файле main.js у меня будет следующее:

const urlLocation =’https://my-url/v1/’;
const authHeaders = {Authorization: ‘Bearer ‘ +
  $.cookie(‘jwtToken’), ‘Content-Type’: ‘application/json’};
window.postJson = function (url, data) {
  return fetch(urlLocation + url, {method: “POST”, headers:
    authHeaders, body: JSON.stringify(data)}).then((res) => res.json());
}
window.getJson = function (url) { 
  return fetch(urlLocation + url, {method: “GET”, headers: authHeaders})
    .then((res) => res.json()); 
  }
window.deleteJson = function (url) { 
  return fetch(urlLocation + url, {method: “DELETE”, headers: authHeaders})
    .then((res) => res.json()); 
  }
window.putJson = function (url) { 
  return fetch(urlLocation + url, {method: “PUT”, headers: authHeaders})
    .then((res) => res.json()); 
  }

И в моем проекте, если мне нужно сделать вызов get, чтобы получить всех пользователей, все, что мне нужно сделать, это:

const alUsers = await getJson(allUsers+'users').then( (res) => { return res; } );

Как видите, это гораздо более чистый и простой в обслуживании способ выполнения вызовов API для отдыха. Теперь у меня есть вся моя логика только в одном месте, и я могу легко изменить расположение базового URL-адреса или добавить/удалить заголовки.