[Javascript] Wrap an API with a Proxy

Posted 2021-02-08 Answer1215

Proxies allow you to use functions that haven‘t yet been defined on an object. This means that you can invoke a function then create that function if it works with your API. This lesson shows you how to create an API around a rest service so that you can name each get request as a function on the Proxy.

 

 Imaging you need to call API with fetch for multi API endpoints, we can create multi API call functions, with some duplicate code. Proxy can help us to reduce the level of repeation.

const API_ROOT = "https://swapi.co/api";

const createApi = url => {
  return new Proxy(
    {
      headers: {
        "Content-Type": "application/json"
      }
    },
    {
      get: (target, key) => {
        return async function(id) {
          const response = await fetch(`${url}/${key}/${id}`, {}, target);
          if (response.ok) {
            return response.json();
          }

          return Promise.reject("Network error");
        };
      }
    }
  );
};
const api = createApi(API_ROOT);

export const peopleApi = api.people;
export const planetsApi = api.planets;
export const starshipsApi = api.starships;

async function go() {
  const people = await peopleApi(1);
  console.log(people);

  const planets = await planetsApi(1);
  console.log(planets);

  const starships = await starshipsApi(1);
  console.log(starships);
}

go();