msb-fetch – Request Utility Library

📦 Installation

Install using npm:

npm install msb-fetch

Or using yarn:

yarn add msb-fetch

A powerful, flexible HTTP request utility for JavaScript/TypeScript applications. Supports GET, POST, PUT, DELETE, batch requests, file uploads, and progress tracking.

📌 Features

• Unified request wrapper returning a standard Observer response.
• Smart detection of FormData uploads.
• Upload progress (single & multi-file).
• Batch requests (parallel GET/POST/mixed).
• Simplified error handling.
• Clean usage with TypeScript generics.

📚 API Documentation & Use Cases

Below are additional practical code examples for each method.

🔔 Using Callback + Then Function

You can use callbacks (like progress callbacks) along with .then() chaining.

✔ Example: POST with progress callback + then()

import MsbFetch, { post} from "msb-fetch";

const form = new FormData();
form.append("file", file);

MsbFetch.post("/upload", form, {
  onUploadProgress: (p) => {
    console.log("Upload Progress:", p);
  }
}).then(res => {
  if (res.isSuccess) {
    console.log("File uploaded successfully", res.data);
  } else {
    console.error("Upload failed", res.message);
  }
});

//OR

const response=await MsbFetch.post("/upload",form,{
  onUploadProgress: (p) => {
    console.log("Upload Progress:", p);
  }
})

// OR 

post("/upload", form, {
  onUploadProgress: (p) => {
    console.log("Upload Progress:", p);
  }
}).then(res => {
  if (res.isSuccess) {
    console.log("File uploaded successfully", res.data);
  } else {
    console.error("Upload failed", res.message);
  }
})

//OR 
const response=await post("/upload",form,{
  onUploadProgress: (p) => {
    console.log("Upload Progress:", p);
  }
})

✔ Example: Multiple file upload + callback + then()

import MsbFetch, { manyFileUpload } from "msb-fetch";

MsbFetch.manyFileUpload("/upload/many", formData, {
  onUploadKeyProgress: (items) => {
    items.forEach(it => {
      console.log(`${it.name} → ${it.progress}%`);
    });
  }
}).then(result => {
  if (result.isSuccess) {
    console.log("All files uploaded", result.data);
  }
});

//OR

const response=await MsbFetch.manyFileUpload("/upload/many", formData, {
  onUploadKeyProgress: (items) => {
    items.forEach(it => {
      console.log(`${it.name} → ${it.progress}%`);
    });
  }
});


//OR 

manyFileUpload("/upload/many", formData, {
  onUploadKeyProgress: (items) => {
    items.forEach(it => {
      console.log(`${it.name} → ${it.progress}%`);
    });
  }
}).then(result => {
  if (result.isSuccess) {
    console.log("All files uploaded", result.data);
  }
});

//OR

const response=manyFileUpload("/upload/many", formData, {
  onUploadKeyProgress: (items) => {
    items.forEach(it => {
      console.log(`${it.name} → ${it.progress}%`);
    });
  }
})

📘 Method Examples

Below are clean, ready‑to‑use examples for every MsbFetch method.

1️⃣ get() – Fetch Data

MsbFetch.get("/api/users")
  .then(res => {
    if (res.isSuccess) console.log(res.data);
  });

2️⃣ post() – Send JSON or FormData

JSON Example

MsbFetch.post("/api/add-user", { name: "Alex" })
  .then(res => console.log(res));

FormData Example

const fd = new FormData();
fd.append("avatar", file);

MsbFetch.post("/api/upload", fd, {
  onUploadProgress: (p) => console.log("Progress:", p)
}).then(r => console.log(r));

3️⃣ put() – Update Data

MsbFetch.put("/api/update/10", { name: "Updated" })
  .then(res => console.log(res));

4️⃣ delete() – Remove Data

import MsbFetch, { remove } from "msb-fetch";

MsbFetch.delete("/api/delete/5")
  .then(res => console.log(res));

 //OR 

const response=await MsbFetch.delete("/api/delete/5");

//OR

remove("/api/delete/5")
  .then(res => console.log(res));

//OR
const response=await remove("/api/delete/5");

  

5️⃣ multipleGet() – Parallel GET Requests

MsbFetch.multipleGet([
  "/api/user",
  "/api/stats",
  "/api/profile"
]).then(results => {
  console.log(results);
});

6️⃣ multiplePost() – Parallel POST Requests

const body = { status: true };

MsbFetch.multiplePost([
  "/api/a",
  "/api/b",
  "/api/c"
], body).then(responses => {
  console.log(responses);
});

7️⃣ multipleRequest() – Mixed GET/POST/PUT/DELETE

MsbFetch.multipleRequest([
  { url: "/user", method: "GET" },
  { url: "/add", method: "POST", body: { x: 1 } },
  { url: "/update/3", method: "PUT", body: { y: 2 } },
  { url: "/remove/3", method: "DELETE" }
]).then(res => console.log(res));

8️⃣ uploadWithProgress() – Single or Mixed File Upload

const fd = new FormData();
fd.append("file", file);

MsbFetch.uploadWithProgress("/upload", fd, {
  onUploadProgress: (p) => console.log("Uploaded:", p)
});

9️⃣ manyFileUpload() – Per‑File Progress

const fd = new FormData();
fd.append("file1", file1);
fd.append("file2", file2);

MsbFetch.manyFileUpload("/upload/many", fd, {
  onUploadKeyProgress: (items) => {
    items.forEach(it => console.log(it.name, it.progress + "%"));
  }
});

🔔 Using Callback + Then Function(url, config?)`

✔ Use Case: Fetch data from server

Example scenarios:

• Load dashboard data
• Fetch user profile
• Retrieve lists

const res = await MsbFetch.get<User>("/api/user");

2️⃣ post(url, body?, config?)

✔ Use Case: Submit data (JSON or FormData)

Example scenarios:

• Login form
• Save user details
• Upload file

const res = await MsbFetch.post("/api/login", { email, password });

✔ Use Case: Upload with progress

MsbFetch.post("/upload", formData, {
  onUploadProgress: (p) => console.log("Progress", p)
});

3️⃣ put(url, body?, config?)

✔ Use Case: Update existing data

Example scenarios:

• Update profile
• Edit order
• Modify settings

MsbFetch.put("/api/user/12", { name: "Madhu" });

4️⃣ delete(url, config?)

✔ Use Case: Remove a resource

Example scenarios:

• Delete user
• Delete post
• Remove file

MsbFetch.delete("/api/user/5");

5️⃣ multipleGet(urls, commonConfig?)

✔ Use Case: Load multiple APIs together

Example scenarios:

• Dashboard with widgets
• Fetch categories, products, filters simultaneously

MsbFetch.multipleGet(["/api/users", "/api/orders", "/api/stats"]);

6️⃣ multiplePost(urls, commonBody, commonConfig?)

✔ Use Case: Send same data to multiple endpoints

Example scenarios:

• Logging to two services
• Submit form to multiple processors

MsbFetch.multiplePost(["/api/a", "/api/b"], { x: 1 });

7️⃣ multipleRequest(requestMap[])

✔ Use Case: Mixed GET/POST/PUT/DELETE batch

Example scenarios:

• Complex initialization
• Multi-action bulk update

MsbFetch.multipleRequest([
  { url: "/api/a", method: "GET" },
  { url: "/api/b", method: "POST", body: { a: 1 } },
  { url: "/api/c/3", method: "DELETE" }
]);

8️⃣ uploadWithProgress(url, FormData, config?)

✔ Use Case: File upload with total progress

Example scenarios:

• Upload image, video
• Upload documents
• Show loader/progress bar

MsbFetch.uploadWithProgress("/upload", formData, {
  onUploadProgress: (p) => console.log(p)
});

9️⃣ manyFileUpload(url, FormData, config?)

✔ Use Case: Upload multiple files with individual progress

Example scenarios:

• Upload 5 images with 5 separate progress bars
• Upload attachments in chat

MsbFetch.manyFileUpload("/upload/many", formData, {
  onUploadKeyProgress: (progressItems) => console.table(progressItems)
});

🔟 Internal Methods

onSuccess(data)

Creates standardized success response. Used internally.

onFailure(error)

Creates standardized error response. Used internally.

📦 Observer Response Format

Every method returns:

{
  isSuccess: boolean,
  data: any,
  message: string,
  statusCode: number,
  exception?: any
}

🎯 Summary of When to Use What

| Method | Use Case | | -------------------- | ------------------------------ | | get | Fetch data | | post | Create / submit / upload | | put | Update data | | delete | Remove resource | | multipleGet | Load many APIs together | | multiplePost | Same POST body to many URLs | | multipleRequest | Mixed batch operations | | uploadWithProgress | Single upload progress | | manyFileUpload | Multi-file individual progress |

✨ Best Practices

• Always wrap API calls in try/catch in UI layer.
• Use Observer for unified error UI.
• Use FormData for files only.

💙 Author

• Madhusudan Barman
• Creator of msb-fetch