Vue使用axios发送请求简单实现代码
更新时间：2023年04月04日 08:44:35 作者：ForestSpringH
axios是一个基于Promise的，发送http请求的一个工具库，并不是vue中的第三方插件，使用时不能通过“Vue.use()”安装插件，需要在原型上进行绑定
上一篇文章我们在vue工程项目中引入了axios库并将通用的API进行了封装，但是遇到了一个问题就是我们在组件内部写的函数发送请求是不会被vue实例进行执行的，也就是说VC中的函数无法直接的由VM去接管执行，这时我们需要将这个请求的执行函数位置调到APP这个父组件上去，因为只有APP组件被所谓的VM给接管了的，其他的组件都是APP组件的子组件。
例：当我们在APP组件的子组件UserLogin组件中写到登录函数：
login(){
console.log('登录')
let params = {
userAccount: UserInfo.userAccount,
password: UserInfo.password
}
// 防止闭包找不到data元素的调用
let that = this
API.login(params).then(
function (res) {
// res.data = res
if (res.code == 1) {
that.userAccount = params.userAccount
that.authority = 1
that.loginWord = false
that.SystemFrom(0)
}
else
that.SystemFrom(1)
}
},这时的登录函数是没办法在子组件内部进行运行的。也就是我跑起来之后是没办法通过登录按钮进行访问服务器接收数据的。
这里我将这行代码放进我们的APP组件中就成功的实现了数据的访问与接收。但是这涉及到子组件与父组件的数据通信的方式：上次说道this.$emit('父组件在子组件上绑定的方法名')可以实现子组件调用父组件的方法，而在父组件调用子组件时如果有<login name=' params '>就可以在子组件内的props:[' name']对该参数进行接收，之后的处理都是以name进行操作的，那么我们其实也可以将其变成一个函数就可以直接在子组件内部调用父组件的函数了。
父组件相关代码：
<div v-if="loginWord === true">
<login @close="closeL" :startLogin="startLogin"></login>
</div>
//以下是methods内部
// 登录请求发起
startLogin(UserInfo){
console.log('登录')
let params = {
userAccount: UserInfo.userAccount,
password: UserInfo.password
}
// 防止闭包找不到data元素的调用
let that = this
API.login(params).then(
function (res) {
// res.data = res
if (res.code == 1) {
that.userAccount = params.userAccount
that.authority = 1
that.loginWord = false
that.SystemFrom(0)
}
else
that.SystemFrom(1)
}
)
},子组件代码：
UserInfo:{
userAccount:"",
password:""
},
//以上是data内部
// 接收父组件APP传递的函数startLogin
props:['startLogin'],
//以下是methods内部
login(){
// 调用父组件传递的函数并传递UserLogin对象
this.startLogin(this.UserInfo)
},当然父子组件间的通信还可以通过 消息的订阅与发布 ，全局事件总线的方式进行设置，但是我没还没用到，等用到了再写出来。
到此这篇关于Vue使用axios发送请求简单实现代码的文章就介绍到这了,更多相关Vue axios发送请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue 指令与过滤器，本文通过案例代码给大家详细讲解，给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-11-11
用v-html解决Vue.js渲染中html标签不被解析的问题
这篇文章主要给大家介绍了如何利用v-html解决Vue.js渲染过程中html标签不能被解析，html标签显示为字符串的问题，文中通过图文介绍的很详细，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章主要介绍了vue用vis插件如何实现网络拓扑图，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家学习介绍了Vue如何使用echarts绘制柱状图和折线图,文中有详细的示例代码,感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
keep-alive是vue中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM,这篇文章主要介绍了Vue中Keep-Alive缓存组件使用语法及原理,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了介绍了Vue中跨标签通信的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
在管理系统中，常常需要在顶部tags显示浏览历史。本文将教大家如何通过Vue实现这一功能，文中的示例代码讲解详细，需要的可以参考一下2021-12-12
最近项目中又使用了vue,所以来给大家总结下,下面这篇文章主要给大家介绍了关于vue的常用实例方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
虽然老早就看过很多echarts的例子,但自己接触的项目中一直都没有真正用到过,直到最近才开始真正使用,下面这篇文章主要给大家介绍了关于vue项目中echarts自适应问题的高级解决过程,需要的朋友可以参考下2023-05-05
easycom模式开发UNI-APP组件调用必须掌握的实用技巧
uni-app基于VUE开发，通常组件的使用都是先安装，然后全局或者局部引入，注册，今天通过本文给大家分享easycom模式开发UNI-APP组件调用必须掌握的实用技巧，需要的朋友一起看看吧2021-08-08
最新评论