npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

lafetch

v0.4.5

Published

Very light modular replacement for libs like axios, based on the fetch API.

Downloads

34

Readme

lafetch

Very light modular replacement for libs like axios, based on the fetch API.

Build Status codecov bundlephobia npm Deps DevDeps

  • Binary data support and full tests are coming soon. *

USAGE


// It's a full toolkit with types. Importing only Fetch is fine.
import { Fetch, addHeaders, Query, Headers } from 'lafetch'

// Default values.
const api = new Fetch({
  // Automatically turns response into an object.
  // Otherwise, returns raw response from fetch API:
  //   do `await response.json() to get it.
  json?: true,
  // Common base url. E.g. your api domain.
  base?: '/',
  // Object with headers.
  headers?: {},
  // List of async middlewares executed from last to first
  //   procesing queries.
  middleware?: {
    in?: [], // ({query, response}) => Promise<{query, response}>
    out?: [] // (query: Query) => Promise<Query>
  },
  // fetch adapter. Defaults to the window fetch.
  // In node can work with https://www.npmjs.com/package/node-fetch
  // But there many of config fields are not implemented, i.e. credentials. 
  adapter?: fetch,
  credentials?: 'omit' | 'same-origin' | 'include', // fetch API credentials field.
  throwCodes?: /5../, // HTTP status codes to throw. Defaults to /\n/ (no throws at all).
  handleArrays?: '[]' // querystring: arr[]=1&arr[]=2&... vs arr=1,2,...
})

Query is of type

interface Query {
  url: string
  method?: RESTMethods // e.g. 'get' or 'post'
  // Prevents query from going to server and returns this.
  // Useful for mocks.
  result?: any
  // querystring parameters.
  params?: {
    [name: string]: string | null
  }
  headers?: Headers
  json?: boolean
  credentials?: 'same-origin', // fetch API credentials field. Same as in the config.
  throwCodes?: /5../, // Status codes to throw. Same as in the config.
  handleArrays?: '[]' // querystring: arr[]=1&arr[]=2&... vs arr=1,2,...
}

Real example:

// addHeaders helper is curried.
const addDevHeaders = async (query) => addHeaders({
  'Content-Type': 'application/json',
  Authorization: 'Bearer 123123123'
})(query)

const api = new Fetch({
  base: 'https://api.example.com/',
  middleware: [
    out: [  // to a server.
      addDevHeaders
    ],
    in: [  // from a server.
      // You can handle error status codes, for instance.
      async ({query, response}) => ({query, response})
    ]
  ]
})

// Argument is a Query.
const data = await api.query({
  url: '/goods',
  params: {
    minPrice: 100,
    maxPrice: 200,
    cat: 'smartphones'
  }
})

const response = await api.query({
  json: false,
  url: '/goods',
  params: {
    minPrice: 100,
    maxPrice: 200,
    cat: 'smartphones'
  }
})