Using Axios to Consume APIs

An API can be consumed and displayed many times when building web applications. Several methods can be used to do this, but axios is one of the most popular.

Mock API Example

In this exercise, we have used the https://dummyjson.com/ dummy API to represent mock API example using axios.

{
  "data": {
    "id": 1,
    "title": "Essence Mascara Lash Princess",
    "description": "The Essence Mascara Lash Princess is a popular mascara known for its volumizing and lengthening effects. Achieve dramatic lashes with this long-lasting and cruelty-free formula.",
    "category": "beauty",
    "price": 9.99,
    "discountPercentage": 10.48,
    "rating": 2.56,
    "stock": 99,
    "tags": [
      "beauty",
      "mascara"
    ],
    "brand": "Essence",
    "sku": "BEA-ESS-ESS-001",
    "weight": 4,
    "dimensions": {
      "width": 15.14,
      "height": 13.08,
      "depth": 22.99
    },
    "warrantyInformation": "1 week warranty",
    "shippingInformation": "Ships in 3-5 business days",
    "availabilityStatus": "In Stock",
    "reviews": [
      {
        "rating": 3,
        "comment": "Would not recommend!",
        "date": "2025-04-30T09:41:02.053Z",
        "reviewerName": "Eleanor Collins",
        "reviewerEmail": "eleanor.collins@x.dummyjson.com"
      },
      {
        "rating": 4,
        "comment": "Very satisfied!",
        "date": "2025-04-30T09:41:02.053Z",
        "reviewerName": "Lucas Gordon",
        "reviewerEmail": "lucas.gordon@x.dummyjson.com"
      },
      {
        "rating": 5,
        "comment": "Highly impressed!",
        "date": "2025-04-30T09:41:02.053Z",
        "reviewerName": "Eleanor Collins",
        "reviewerEmail": "eleanor.collins@x.dummyjson.com"
      }
    ],
    "returnPolicy": "No return policy",
    "minimumOrderQuantity": 48,
    "meta": {
      "createdAt": "2025-04-30T09:41:02.053Z",
      "updatedAt": "2025-04-30T09:41:02.053Z",
      "barcode": "5784719087687",
      "qrCode": "https://cdn.dummyjson.com/public/qr-code.png"
    },
    "images": [
      "https://cdn.dummyjson.com/product-images/beauty/essence-mascara-lash-princess/1.webp"
    ],
    "thumbnail": "https://cdn.dummyjson.com/product-images/beauty/essence-mascara-lash-princess/thumbnail.webp"
  },
  "status": 200,
  "statusText": "",
  "headers": {
    "content-type": "application/json; charset=utf-8"
  },
  "config": {
    "transitional": {
      "silentJSONParsing": true,
      "forcedJSONParsing": true,
      "clarifyTimeoutError": false
    },
    "adapter": [
      "xhr",
      "http"
    ],
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "env": {},
    "headers": {
      "Accept": "application/json, text/plain, */*"
    },
    "method": "get",
    "url": "https://dummyjson.com/products/1"
  },
  "request": "[object XMLHttpRequest]"
}

Introduction
Mock API Example

Using Axios to Consume APIs

Mock API Example

CONTENTS