1. 基本用法演示
-
get
请求<button @click="getInfo">发起 GET 请求</button>
methods: { async getInfo () { const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/get') console.log(res) } }
-
post
请求<button @click="postInfo">发起 POST 请求</button>
methods: { async postInfo () { const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', age: '20' }) console.log(res) } }
2. 把 axios 挂载到 Vue 原型上并配置请求根路径
2.1 挂载
-
在 main.js 文件中引入 axios
import axios from 'axios'
-
并且将axios 作为 Vue 原型的一个属性,命名为
$http
Vue.prototype.$http = axios
-
今后,在每个 .vue 组件中要发起请求,直接调用
his.$http.xxx
this.$http.post('地址', { 数据 }) this.$http.get('地址')
2.2 配置请求根路径
-
在 挂载之前 配置根路径
axios.defaults.baseURL = '请求根路径'
-
之后的路径直接写根路径之后的即可
this.$http.get('/xxx/xxx')
2.3 缺点
- 不利于 API 接口的复用
2.4 main.js 源码
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
Vue.config.productionTip = false
// 全局配置的 axios 根路径
axios.defaults.baseURL = 'xxx'
// 把 axios 挂载到 Vue.prototype 上 供实例直接调用
Vue.prototype.$http = axios
new Vue({
render: h => h(App)
}).$mount('#app')