API wrapper for Svelte

API.ts

// src/lib/Support/Http/API.ts

import Axios from 'axios'
import {get} from "svelte/store"
import {Errors$} from "$lib/Support/Store/Error"
import { Auth$ } from '$lib/Support/Store/Auth'
import type {TApiCall} from "$lib/Contract/Http"
import {BASE_API} from "$lib/Env"
import {goto} from "$app/navigation"
import Toast from "$lib/Support/Store/Toast"
import {dev} from "$app/env"

const ApiCall: TApiCall= (method) => async (url, input, config = {}) => {
    Errors$.set({})
    let $Auth$ = get(Auth$)

    if ($Auth$?.access_token) {
        config.headers = {
            Authorization: 'Bearer ' + $Auth$.access_token
        }
    }
    return Axios({
        ...config,
        method,
        withCredentials: true,
        data: method == 'get' ? {} : input,
        params: method == 'get' ? input : {},
        baseURL: BASE_API,
        url,
        headers: config.headers,
        onUploadProgress: config.onUploadProgress
    }).then(async (res) => {
        let { data, headers } = res
        if (dev) console.info(`response ${method}: ${url} `, data);
        if (headers['access-token']) {
            Auth$.set({
                access: headers['access'] ? JSON.parse(headers['access']) : {},
                access_token: headers['access-token']
            })
        }
        Errors$.set({})
        return data
    }).catch(err => {
        if (err.response !== undefined) err = err.response.data
        if (err.code == 401) {
            Auth$.set({
                access: {},
                access_token: null
            })
            goto('/admin/login')
        }
        if (err.code == 422) Errors$.set(err.errors)
        Toast.error(err.message)

        if (dev) console.warn("API FAIL " + url, err);
        throw err;
    })
}

const API = {
    get: ApiCall('GET'),
    post: ApiCall('POST'),
    put: ApiCall('PUT'),
    patch: ApiCall('PATCH'),
    delete: ApiCall('DELETE')
}
export default API

example.ts

// usage example
import API from '$lib/Support/Http/Api'

interface IAuth {
  access_token: string | null,
  acces?: {} 
}

API.post<any, IAuth>("/auth/login", input)
  .then((data) => {
      Auth$.set({
          access_token: data.access_token,
          access: data.access,
      });
  })
  .then((_) => {
      goto("/admin", {
          replaceState: true,
      });
  })
  .finally(() => {
      isLoading = false;
  });

Http.ts

// src/lib/Contract/Http.ts

import type { AxiosRequestConfig, Method } from "axios";

export type TApiCall = (method: Method) => <Input, Response > (url: string, input?: Input, config?: AxiosRequestConfig) => Promise<Response>