2-18-使用axios

安装axios

安装指令：

npm i axios -S

使用axios

在对应的vue文件中引入axios

import axios from ‘axios’

定义button

<button @click="getInfo">发起GET请求</button>

<button @click="postInfo">发起POST请求</button>

定义getInfo和postInfo的方法

methods: {

async getInfo() {

const { data: res } = await
axios.get('http://liulongbin.top:3006/api/get');

console.log(res);

},

async postInfo() {

const { data: res } = await
axios.post('http://liulongbin.top:3006/api/post', {'name': 'zs',
'age': 20});

console.log(res);

}

}

挂载在Vue原型上

打开main.js，添加：

import axios from 'axios'

Vue.prototype.$http = axios

这样$http就会存放axios的所有功能，所有子vue只需要通过：

this.$http.xxxx

便可调用axios的功能。

但是这样做还是不够方便，每次请求一个接口都需要重写一遍请求代码。因此需要用到路由？

配置请求根路径

在axios的defaults中便可指定相关参数，如baseURL便可指定请求的根路径，定义如下：

axios.defaults.baseURL = 'http://liulongbin.top:3006'

参考：

Vue2.0-28.axios - 演示axios的基本用法并发现存在的问题

Vue2.0-29.axios - 把axios挂载到Vue的原型上并配置请求根路径