Vue 使用 axios 请求的两种方式

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false;
// 1.引入axios
import axios from 'axios'
// 2.引入qs
import qs from 'qs'
// 3.将axios绑定到vue原型上，并命名为$axios
Vue.prototype.$axios = axios;
// 4.将qs绑定到vue原型上，并命名为$qs
Vue.prototype.$qs = qs;
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

<template>
    <div>
        <p>{{ name }}</p>
    </div>
</template>
<script>
export default {
    name: "Home",
    data() {
        return {
            name: "GET请求"
        }
    },
    created() {
        // 1. 第一种写法
        this.$axios({
            method: 'get',
            url: 'http://xxx/webapi/user/info',
            params: {
                id: 1
            }
        }).then((res) => {
            console.log(res.data);
        })
        // 2. 使用get别名写法
        this.$axios.get('http://xxx/webapi/user/info', {
            params: {
                id: 1
            }
        }).then((res) => {
            console.log(res.data);
        })
    }
}
</script>

<template>
    <div>
        <p>{{ name }}</p>
    </div>
</template>
<script>
export default {
    name: "Home",
    data() {
        return {
            name: "POST请求"
        }
    },
    created() {
        // 1. 第一种写法
        this.$axios({
            method: 'post',
            url: 'http://xxx/webapi/user/info',
            data: {
                id: 1
            }
        }).then((res) => {
            console.log(res.data);
        })
        // 2. 使用post别名写法
        this.$axios.post('http://xxx/webapi/user/info', {
            id: 1
        }).then((res) => {
            console.log(res.data);
        })
    }
}
</script>