How to create an API wrapper using a JavaScript proxy (#snippet)

I just found a super smart gist from David Wells that's worth bookmarking.

David uses a JavaScript Proxy to create wrapper around fetch. And thanks to the proxy, object properties are automatically mapped to resources of a RESTful API.

apiObject.cars() maps to /cars/ and apiObject.cars('123') maps to /cars/123/. 👏

// Found at https://gist.github.com/DavidWells/53518b3c12344952641dc81cc7599939
const createApi = (url) => {
  return new Proxy({}, {
    get(target, key) {
      return async function(id = "") {
        const response = await fetch(`${url}/${key}/${id}`)
        if (response.ok) {
          return response.json();
        }
        return Promise.resolve({ error: "Malformed Request" })
      }
    }
  })
}

let api = createApi("https://swapi.co/api")

// 'get' request to https://swapi.co/api/people
let people = await api.people()

// 'get' request to https://swapi.co/api/people/1
let person = await api.people(1)

What a great little trick! 💯