Axios

install

yarn add axios

tereminal

ryamashita@ryamashita chat-app % yarn add axios
yarn add v1.22.21
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > vite-plugin-vuetify@1.0.2" has incorrect peer dependency "vite@^2.7.0 || ^3.0.0 || ^4.0.0".
warning " > vue-cli-plugin-vuetify@2.5.8" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "vue-cli-plugin-vuetify > null-loader@4.0.1" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 4 new dependencies.
info Direct dependencies
└─ axios@1.6.5
info All dependencies
├─ axios@1.6.5
├─ follow-redirects@1.15.4
├─ form-data@4.0.0
└─ proxy-from-env@1.1.0
✨  Done in 1.33s.
ryamashita@ryamashita chat-app % 

実装

vue.js

import axios from 'axios'
export default {
    data: () => ({
        user: [],
    }),
    mounted() {
        this.getUser()
    },
    methods: {
        getUser() {
            // API
            const path = 'http://localhost:8080/api/practice'
            axios.get(path)
            .then(response => {
                this.user = response.data
            })
            .catch(error => {
                console.log(error)
            })
        },
    },
}
</script>