我使用的是vue-cli+axios的组合,下面我想记录一下如何在vue-cli中使用axios:
1.使用NPM安装axios并进行配置
首先利用npm进行安装
将终端移至项目目录下,输入
npm install axios
当出现如下图时则表示axios已经下载成功:
接下来配置axios:
在vue-cli目录中的main.js中:加入以下两行代码:
import axios from 'axios'
Vue.prototype.$axios=axios;
添加到main.js的位置应如图所示:
除此之外还可如图中所示添加baseUrl:
this.$axios.defaults.baseURL='地址'
这样就完成了在vue-cli中的配置
使用axios向后端发送请求
我们将一个完整的axios写在某个组件的created()函数中:
let _this=this;
this.$axios({
method:'get',
url:'/MainPage/listAllSorts'
}).then(function (response) {
_this.$data.typeInfo=response.data;
}).catch((function (error) {
console.log(error.response.data);
}));
在vue-cli中用此方法使用axios,首先要用this.$axios调用,其中各参数为:
- method是发送请求的类型,包括'get'、'post'、‘put’、‘delete’,
- url是请求的地址,如果设置了前面的baseURL属性,则可以基于设置的url填写
- .then(function(response))用来处理请求后的后端返回,其中response代表返回的请求信息,可以对它任意命名
- .catch(function(error))用以处理请求出错的错误返回,其中error代表返回的错误的信息,也可任意命名
以上是一个最简单的请求实例,没有发送数据,如果需要发送参数,则可以使用:
- data:{}用以向后端发送json数据
- params:{}用以向后端发送合并在url上的数据
下面一个简单的示例:
let _this=this;
this.$axios({
method:'get',
url:'/MainPage/listAllSorts',
data:{
key:1231
}
}).then(function (response) {
_this.$data.typeInfo=response.data;
}).catch((function (error) {
console.log(error.response.data);
}));
在这个例子中key是以json的方式传给后端
let _this=this;
this.$axios({
method:'get',
url:'/MainPage/listAllSorts',
params:{
key:1231
}
}).then(function (response) {
_this.$data.typeInfo=response.data;
}).catch((function (error) {
console.log(error.response.data);
}));
此例中key被标识在url上,相当于:
http://基地址/MainPage/listAllSorts?key=1231
除此之外还有很多的参数可以添加,在这就不赘述了,各位可以去官网查看