Vue.js Axios

What is Axios?

Axios is a promise-based HTTP client for the browser and Node.js. It is commonly used in Vue.js applications to make HTTP requests to APIs, enabling you to retrieve or send data to a server easily.

How do you install Axios in a Vue.js project?

You can install Axios in a Vue.js project using npm or yarn. Run one of the following commands in your terminal:

npm install axios
# or
yarn add axios

How do you make a GET request using Axios in Vue.js?

You can make a GET request using Axios by calling the axios.get() method and providing the URL. The response can be processed in a then block or using async/await syntax.

import axios from 'axios';

const app = new Vue({
  el: '#app',
  data: {
    posts: []
  },
  created() {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        this.posts = response.data; // Storing the response data
      })
      .catch(error => {
        console.error('Error fetching posts:', error);
      });
  },
  template: `
    <div>
      <h1>Posts</h1>
      <ul>
        <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
      </ul>
    </div>
  `
});

How do you make a POST request using Axios in Vue.js?

You can make a POST request using Axios by calling the axios.post() method, providing the URL and the data to be sent in the request body.

const app = new Vue({
  el: '#app',
  data: {
    newPost: {
      title: '',
      body: ''
    }
  },
  methods: {
    createPost() {
      axios.post('https://jsonplaceholder.typicode.com/posts', this.newPost)
        .then(response => {
          console.log('Post created:', response.data);
        })
        .catch(error => {
          console.error('Error creating post:', error);
        });
    }
  },
  template: `
    <div>
      <h1>Create a Post</h1>
      <input v-model="newPost.title" placeholder="Title">
      <textarea v-model="newPost.body" placeholder="Body"></textarea>
      <button @click="createPost">Submit</button>
    </div>
  `
});

How do you handle errors in Axios requests?

You can handle errors in Axios requests by using the catch method after the request or by using a try-catch block when using async/await.

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log('Posts:', response.data);
  })
  .catch(error => {
    console.error('Error fetching posts:', error.response ? error.response.data : error.message);
  });

What are interceptors in Axios?

Interceptors are functions that allow you to intercept requests or responses before they are handled by then or catch. You can use interceptors to modify requests, handle errors globally, or log requests and responses.

axios.interceptors.request.use(request => {
  console.log('Starting Request', request);
  return request;
});

axios.interceptors.response.use(response => {
  console.log('Response:', response);
  return response;
});

How do you set global Axios defaults?

You can set global Axios defaults using the axios.defaults object. This allows you to configure default settings such as base URL, headers, and timeout for all Axios requests.

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.timeout = 10000; // 10 seconds timeout

How do you cancel Axios requests?

You can cancel Axios requests by using the CancelToken source. This allows you to create a token that can be used to cancel the request at any point.

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/posts', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c; // Store the cancel function
  })
}).then(response => {
  console.log(response.data);
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled:', error.message);
  } else {
    console.error('Error fetching posts:', error);
  }
});

// To cancel the request
cancel('Operation canceled by the user.');

How do you use Axios with async/await syntax in Vue.js?

You can use Axios with async/await syntax by defining an async method and using the await keyword to wait for the Axios request to resolve before continuing with the code execution.

const app = new Vue({
  el: '#app',
  data: {
    posts: []
  },
  async created() {
    try {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
      this.posts = response.data; // Storing the response data
    } catch (error) {
      console.error('Error fetching posts:', error);
    }
  },
  template: `
    <div>
      <h1>Posts</h1>
      <ul>
        <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
      </ul>
    </div>
  `
});