Vue3使用axios

原创已于 2023-03-24 13:17:24 修改 · 432 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2023-03-24 13:16:50 首次发布

Vue 专栏收录该内容

10 篇文章

订阅专栏

文章展示了在Vue项目中如何配置和使用axios库进行HTTPGET请求，通过`getCurrentInstance`获取实例并在`setup`函数中更新组件数据。示例代码包括了`package.json`依赖、`main.js`全局引入axios以及组件内使用axios获取并设置数据。

package.json:

"axios": "^1.3.4",
"vue-axios": "^3.5.2"

main.js:

import {createApp} from 'vue'
import App from './App.vue'
import Router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import axios from 'axios'



const app = createApp(App)
app.use(Router).mount('#app')
app.config.globalProperties.$axios=axios;

使用，注意setup()方法没有了this:

  import {getCurrentInstance} from "@vue/runtime-core";

    export default {
        name: "ComponentA",
        data() {
            return {
                stus: [
                    {"id": 1, "name": "小明", "gender": "男", "age": 20},
                    {"id": 2, "name": "小明", "gender": "男", "age": 22}

                ]
            }
        },
        setup() {

            const { proxy } = getCurrentInstance()

            proxy.$axios({
                method: "get",
                url: "http://localhost:8090/stu",
            }).then(res => {
                proxy.stus=res.data;
            })

        }
    }