a simple fetcher, based on actions

example.js

import { resolve, text } from './fetcher.js'

const fetchText = event => resolve(event, [
  fetch,
  text,
  data => console.log({ data })
])

document.querySelector('form')
  .addEventListener('submit', fetchText)

document.querySelector('a')
  .addEventListener('click', fetchText)

fetcher.js

const empties = ['GET', 'HEAD']

const reducer = async (promise, action) =>
  action(await promise)

const reduce = async (initialValue, actions) =>
  actions.reduce(reducer, initialValue)

export const json = response => response.json()

export const text = response => response.text()

export const resolve = (event, [...actions] = []) => {
  event.preventDefault()
  
  const { target } = event
  
  const { action, href, method = 'GET' } = target
  
  return reduce( new Request(action ?? href, {
    method,
    ...!empties.includes(method.toUpperCase()) && {
      body: new FormData(form)
    }
  }), actions)
}