Klient dla aplikacji w Redux

Na poprzednich zajęciach praktycznie zakończyliśmy pracę z częścią serwerową dla naszej aplikacji, nieco uzupełnimy ją w miarę potrzeby w kolejnych lekcjach. Teraz musimy stworzyć klienta dla aplikacji, który będzie wysyłał żądania HTTP na serwer.

Otwórzmy naszą aplikację z produktami i w folderze api utwórzmy plik client.js. Na początek napiszemy samą funkcję client, która będzie działać zarówno dla żądań GET, jak i POST. Jako parametry będzie otrzymywać ścieżkę, typ i treść żądania (w przypadku POST), jeśli taka istnieje:

api/client.jsexport async function client(url, method, body = {}) {}

Następnie musimy utworzyć obiekt options, w którym będziemy przekazywać różne informacje dla żądania. Będzie to typ żądania i nagłówki:

api/client.jsexport async function client(url, method, body = {}) {
  const options = {
    method: method,
    headers: {
      'Content-Type': 'application/json',
    },
  }
}

Właściwość body jest u nas opcjonalna, musimy ją przekazywać, jeśli mamy żądanie POST. W tym celu wewnątrz client, po kodzie dla obiektu options, dodajmy ją do options z treścią żądania w formacie JSON, jeśli wybrana jest metoda POST:

api/client.jsif (method === 'POST') {
  options.body = JSON.stringify(body)
}

Następnie poniżej w kodzie client zorganizujmy blok try, w pierwszej linii którego za pomocą fetch otrzymamy odpowiedź od serwera. W przypadku niepowodzenia tradycyjnie zwrócimy promis z błędem:

api/client.jslet data
try {
  const response = await window.fetch(url, options)
} catch (err) {
  return Promise.reject(err.message ? err.message : data)
}

Teraz dokończmy kod w bloku try. Po otrzymaniu response, musimy go przetworzyć. Wyodrębnijmy z niego dane w JSON i jeśli status odpowiedzi sygnalizuje nam, że wszystko w porządku, to zwrócimy obiekt z danymi i informacjami: statusem, nagłówkami i adresem. Jeśli zaś status nie jest 'ok', to wyrzućmy wyjątek z tekstem statusu:

api/client.jstry {
  const response = await window.fetch(url, options)
  data = await response.json()
  if (response.ok) {
    return {
      status: response.status,
      headers: response.headers,
      url: response.url,
      data,
    }
  }
  throw new Error(response.statusText)
}

Kod dla funkcji client jest gotowy, pozostało tylko napisać, jak będą działać nasze metody GET i POST przy wywołaniu. Napiszmy kod dla nich po funkcji client. Metoda client.get będzie przyjmować jako parametr ścieżkę i wywoływać funkcję client, przekazując jej tę ścieżkę i typ żądania GET:

api/client.jsclient.get = (url) => client(url, 'GET')

A client.post powinien przekazywać dla client ścieżkę, typ żądania POST i treść żądania:

api/client.jsclient.post = (url, body) => client(url, 'POST', body)

To wszystko, nasz mały klient jest gotowy do pracy z serwerem.