How to use axios in Vue 3 with Typescript?

Question

Vue.js

I need to make a request to the server with axios, get all posts and output all posts

How can I use axios in a Vue 3 project with Typescript?
well, or at least without typescript

Please provide an example with a get and post request

What I tried:

Created a file for the axios service in the directory service
SnippetsService.ts

import axios from "axios";

export default class SnippetsService {
  public static getAllSnippets() {
    return axios.get("http://localhost:13050/snippets");
  }
}

In the component, I used a method from the class like this:

setup() {

let allSnippets = ref({});

created(() => {
      allSnippets = SnippetsService.getAllSnippets()
        .then(response => {
          console.log(response);
          allSnippets = response;
        })
        .catch(error => {
          console.log(error);
        });
    });
    return { allSnippets };
}

Got an error:

Answer 1

In the browser it is better to use fetch and not axios

Answer 2

When clicking, check for the existence of the .hasClass() class

Answer 3

You can do it on tabs, or open by id and use toggle.