How to Make HTTP Request in Vue: Simple Guide with Example

In Vue, you can make HTTP requests using the fetch API or the popular axios library inside your component's setup or lifecycle hooks. Use fetch for simple requests or axios for more features like automatic JSON parsing and error handling.

Syntax

Here is the basic syntax to make an HTTP GET request using fetch inside a Vue component's setup function:

• fetch(url): Sends a request to the URL.
• .then(response => response.json()): Converts the response to JSON.
• .then(data => { ... }): Handles the data received.
• .catch(error => { ... }): Catches any errors during the request.

javascript

import { ref } from 'vue';

export default {
  setup() {
    const data = ref(null);
    const error = ref(null);

    fetch('https://api.example.com/data')
      .then(response => {
        if (!response.ok) throw new Error('Network response was not ok');
        return response.json();
      })
      .then(json => {
        data.value = json;
      })
      .catch(err => {
        error.value = err.message;
      });

    return { data, error };
  }
};

Example

This example shows a Vue component that fetches user data from a public API and displays the user's name or an error message.

vue

<template>
  <div>
    <p v-if="error">Error: {{ error }}</p>
    <p v-else-if="user">User Name: {{ user.name }}</p>
    <p v-else>Loading...</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const user = ref(null);
const error = ref(null);

onMounted(async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    if (!response.ok) throw new Error('Network response was not ok');
    user.value = await response.json();
  } catch (err) {
    error.value = err.message;
  }
});
</script>

Output

User Name: Leanne Graham

Common Pitfalls

Common mistakes when making HTTP requests in Vue include:

• Not handling errors, which can cause the app to fail silently.
• Forgetting to await asynchronous calls, leading to undefined data.
• Not checking response.ok before parsing JSON, which can cause runtime errors.
• Making requests outside lifecycle hooks or setup, causing unexpected behavior.

javascript

/* Wrong way: Missing error check and await */
fetch('https://api.example.com/data')
  .then(response => response.json()) // No check if response is ok
  .then(data => {
    console.log(data);
  });

/* Right way: Using async/await with error handling */
async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('Failed to fetch');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

Quick Reference

Tips for making HTTP requests in Vue:

• Use fetch for simple requests; use axios for advanced features.
• Always handle errors to improve user experience.
• Use async/await inside setup or lifecycle hooks like onMounted.
• Check response.ok before parsing JSON.
• Keep your API URLs configurable for easier maintenance.

Key Takeaways

Use fetch or axios inside Vue's setup or lifecycle hooks to make HTTP requests.

Always handle errors and check response status before parsing data.

Use async/await for cleaner and easier-to-read asynchronous code.

Make requests inside onMounted or setup to ensure proper timing.

Keep API URLs configurable and separate from component logic.