VUE 3中使用Axios

一、安装axios插件

npm install axios

npm install vue-axios

二、配置main.js文件

阿贾克斯源码

<template>
    <div>
        <ul>
            <li v-for="val in menus" :key="val.uid">
                <img :src="val.imgurl" alt="" width="100">
                <h5>{{ val.title }}</h5>
            </li>
        </ul>
    </div>
</template>

<script>
import { onMounted, getCurrentInstance, ref} from 'vue';
export default {
    setup() {
        //用于字符串、数组、对象，不加.value
        const menus = ref([])
        //用于对象，要加.value
        // const menus = reactive([])
        // vue3阿贾克斯固定格式
        const { proxy } = getCurrentInstance();

        onMounted(() => {
            proxy.$http.get('https://www.fastmock.site/mock/fa8a771554dfd181a46f8e1b742dd651/test/pro')
                .then((response) => {
                    menus.value = response.data.datas;
                    // console.log(menus.value )
                })
        })
        return { menus }
    }
}
</script>

<style lang="scss" scoped></style>