AJAX and Axios

  • views are stored on the server and served up as HTML pages
  • when a user goes to a new page, the browser navigates in totality, refreshing and retrieving a brand new HTML document
  • each page retrieves stylesheets, scripts, files, etc
  • Asynchronous JavaScript And XML
  • Making background HTTP requests using JavaScript
  • Handling the response of those HTTP requests with JavaScript
  • No page refresh necessary
  • Axios is a promise-based HTTP client for JavaScript. It allows you to:
  • Make XMLHttpRequests from the browser
  • Make HTTP requests from node.js
  • Supports the Promise API
  • Automatic transforms for JSON data
  • npm install axios
  • bower install axios
  • CDN script
  • Fetch API is built into the window object and therefore doesn’t need to be installed as a dependency or imported in client-side code
  • Axios needs to be installed as a dependency. However, it automatically transforms JSON data for you, thereby avoiding the two-step process of making a .fetch() request and then a second call to the .json() method on the response
// send a GET request
axios({
method: 'get',
url: 'https://jsonplaceholder.typicode.com/todos'
})
.then(res => console.log(res))
.catch(error => console.error(error));
// shorthand way
axios.get('https://jsonplaceholder.typicode.com/todos')
.then(res => console.log(res))
.catch(error => console.error(error));
}
// execute simultaneous requests using axios.all()
axios.all([
axios.get("https://jsonplaceholder.typicode.com/todos?_limit=5"),
axios.get("https://jsonplaceholder.typicode.com/posts?_limit=5")
])
.then((res) => {
console.log(res[0]);
console.log(res[1]);
})
.catch((error) => console.error(error));
}
// cleaner way using axios.spread()
axios.all([
axios.get("https://jsonplaceholder.typicode.com/todos?_limit=5"),
axios.get("https://jsonplaceholder.typicode.com/posts?_limit=5")
])
.then(axios.spread(todos, posts) => console.log(posts))
.catch((error) => console.error(error));
};
// declare a request interceptor
axios.interceptors.request.use(config => {
// perform a task before the request is sent
console.log('Request was sent');

return config;
}, error => {
// handle the error
return Promise.reject(error);
});

--

--

--

A software engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The 10 Next 11.0.0 Features You Need To Know About From Next.js Conf

Pseudoclassical Subclassing

State Management in React with Reducer but not Redux

How to customize the “Add to home screen” banner for a PWA

How to use Notion API from Typescript Azure Function

Using Vuex4 With Vue3 And Ionic Framework

Build a Reusable React Tab Component with Bit

Get the First, Last and Middle Elements of an Array using JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
DaisyFighting

DaisyFighting

A software engineer

More from Medium

Getting started backend development with KoaJS and REST API’s.

Experiencing web application development as an undergraduate

Capture screenshot with Chrome DevTools

Unit Testing in JavaScript: A Tutorial