Axios is a popular JavaScript library used for making HTTP requests from a browser or Node.js. It provides a simple and elegant way to make asynchronous HTTP requests to a server, and handle responses in a clean and efficient manner.

Fetch is a built-in web API in modern browsers that allows you to make HTTP requests to a server and retrieve data in a simple and straightforward way. It provides an alternative to the traditional XMLHttpRequest (XHR) API, and is designed to be easy to use and flexible.

Axios

One common use case for Axios is to retrieve the content of a web page from a server. This can be achieved by sending a GET request to the server using Axios, and handling the response in the form of a promise.

In this way, you can fetch data from a web page and use it in your application. Whether you need to retrieve data for a single page or multiple pages, Axios can simplify the process and help you manage your data more efficiently.

axios.get({
  method: 'get',
  url: url,
  responseType: 'stream'
})
  .then(function (response) {
    // handle success
    document.getElementById("result").innerText = JSON.stringify(response.data);
    document.getElementById("error_001").innerText = response.data;
    console.dir(response.data);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

    event.preventDefault();

}, false);

Fetch

Fetch can retrieve the content of a web page from a server by sending a GET request to the server using the fetch() function, and handling the response in the form of a promise.

It’s important to note that Fetch only works in modern browsers, and may not be supported in older versions. However, it offers several advantages over the XHR API, including a simpler API, support for Promises and async/await, and better handling of errors and response types.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="result">If you don't have one, try this: https://jsonplaceholder.typicode.com/users/1</div>
<input type="text" name="url" id="link_box" placeholder="Please input the link" value="https://jsonplaceholder.typicode.com/users/1">
<div class="spacer"></div>
<button id="link_box_submit_btn">Okay, here you go</button>
<div id="error_001">This is the error</div>

CSS

#result{
  padding: 10px;
}
#link_box, #link_box_submit_btn, #result, #error_001{
  display: block;
  margin: auto;
  padding: 5px;
  text-align: center;
}
#result{
  width: 500px;
}
.spacer {
  padding:5px;
}

JS

document.querySelector("#link_box_submit_btn").addEventListener("click",
  function (event) {
    const url = document.getElementById("link_box").value;
    console.log(url);
    document.getElementById("error_001").innerText = url;
    fetch(url, {
      method: "GET",
      mode: "cors",
      headers: {
        "Content-Type": "application/json"
      }
    })
      .then((response) => response.json())
      .then((data) => $("#result").text(JSON.stringify(data)))
      .catch((error) => console.log("Error:",error));
    event.preventDefault();
  },
  false
);