vue脚手架中axios的配置与使用
vue脚手架中axios的使用vue脚手架项目中安装axios在终端输入以下命令安装axiosnpm install axios然后在项目的main.js中引入axios,一般新建的项目即使安装了axios依赖也不会自己引入,这里需要手动引一下import axios from 'axios'//引入完成之后需要挂载到vue上Vue.prototype.$http = axios然后就可以在项目中
·
vue脚手架中axios的使用
vue脚手架项目中安装axios
在终端输入以下命令安装axios
npm install axios
然后在项目的main.js中引入axios,一般新建的项目即使安装了axios依赖也不会自己引入,这里需要手动引一下
import axios from 'axios'
//引入完成之后需要挂载到vue上
Vue.prototype.$http = axios
然后就可以在项目中使用axios来进行网络请求了
this.$http.get('10.127.0.1:8080/get').then((res)=>{
console.log(res);
}).catch(function (error) {
console.log(error);
})
this.$http.post('10.127.0.1:8080/user',{
userName:'',
passWord:''
}).then((res)=>{
console.log(res);
}).catch(function (error) {
console.log(error);
})
使用很简单,讲讲配置,在main.js中定义一个总的请求ip和端口号,这样在写请求的时候只需要写路由,前面的ip和端口axios会自动加上去,
// 引入
import axios from 'axios'
// 导入挂载axios
Vue.prototype.$http = axios
// 配置请求根路径
axios.defaults.baseURL = 'http://10.127.0.1:8080/'
// 配置请求超时时间
axios.defaults.timeout = 5000 // 单位是毫秒
现在使用便捷
this.$http.get('/obtain').then((res)=>{
console.log(res);
})
还有更便捷的
如果项目是成功失败都有返回,然后在返回数据的code储存成功与否的话,可以使用async await方式提升代码效率
async login(){
// 因为请求只有成功,这里就不管失败,将返回值直接存起来,解构赋值给data,并且给data起个res的别名,
const { data: res } = await this.$http.get('/obtain' )
// 如果返回值告诉我们请求失败了,就直接return出去结束方法
if (res.code== '200') {
return console.log('失败')
}
// 请求成功,将数据拿出来使用
console.log(res)
}
更多推荐
已为社区贡献1条内容
所有评论(0)