Virgo Development Bazaar

This package contains various functions that can be used in any JavaScript project. It also has some Vue-specific code.

Some of the functions have documentation written, which will show up in some code editors by hovering over the name of the function.

The most frequently used function in this package is api, so that function has special attention in this README.

The api Function

The api function is a wrapper for fetch. We will now go through various things it can do.

GET Request

import api from "@virgodev/bazaar/functions/api";

async function fetchDogBreeds() {
  const responseData = await api({
    url: "https://dog.ceo/api/breeds/list/all",
  });

  if (responseData.status === 200) {
    console.log(responseData.body);
  } else {
    console.log(`Request failed (status code: ${responseData.status})`);
  }
}

fetchDogBreeds();

POST Request (JSON)

import api from "@virgodev/bazaar/functions/api";

async function postJSON() {
  const responseData = await api({
    url: "https://jsonplaceholder.typicode.com/posts",
    method: "POST",
    json: {
      title: "foo",
      body: "bar",
      userId: 1,
    },
  });

  if (responseData.status === 201) {
    console.log(responseData.body);
  } else {
    console.log(`Request failed (status code: ${responseData.status})`);
  }
}

postJSON();

POST Request (FormData)

import api from "@virgodev/bazaar/functions/api";

async function postFormData() {
  const body = new FormData();
  body.append("title", "foo");
  body.append("body", "bar");
  body.append("userId", "1");

  const responseData = await api({
    url: "https://httpbin.org/post",
    method: "POST",
    body,
  });

  if (responseData.status === 200) {
    console.log(responseData.body);
  } else {
    console.log(`Request failed (status code: ${responseData.status})`);
  }
}

postFormData();

Setting a Base URL

There is a good chance that most or all of the requests your project will be making will have the same base URL (e.g. https://dog.ceo/api/). If you are using Vite or Vue CLI, you can specify a base URL in your .env and .env.production files.

Vite:

VITE_APP_API_URL=https://www.example.com/api/

Vue CLI:

VUE_APP_API_URL=https://www.example.com/api/

Setting a Global Request Header

This allows you to always have a header present in the requests you make:

import { setGlobalRequestHeader } from "@virgodev/bazaar/functions/api";

setGlobalRequestHeader("Authorization", "Token 1234abcd");

Adding a Request Handler

This allows you to run a function before each request is made. An example of when this could be useful is if you are developing locally with your front end and back end on different ports and need cookies to work. In that scenario, you could do something like this:

import { addRequestHandler } from "@virgodev/bazaar/functions/api";

addRequestHandler(({ options }) => {
  options.credentials = "include";
});

Adding a Response Handler

This allows you to run a function after each request is made. You can limit it so that your function runs only if the request resulted in a specific status code or you can have your function run after all requests.

import { addResponseHandler } from "@virgodev/bazaar/functions/api";

addResponseHandler(403, () => {
  console.log("A request that resulted in a 403 finished.");
});

addResponseHandler("all", () => {
  console.log("A request finished.");
});