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-03-03
这篇文章主要为大家详细介绍了vue实现简单实时汇率计算功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
本文主要介绍了VUE脚手架框架编写简洁的登录界面的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
本文介绍了如何在Vue3项目中根据路由动态生成侧边菜单,包括准备工作、路由配置基础、组件搭建和优化与拓展,通过这些步骤,可以实现一个灵活且可扩展的侧边菜单系统,提升用户体验,感兴趣的朋友一起看看吧2025-01-01
vue使用css-rcurlyexpected等less报错问题
这篇文章主要介绍了vue使用css-rcurlyexpected等less报错问题，具有很的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue实现右键点击弹框信息功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要为大家详细介绍了springboot+VUE实现登录注册，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
本文通过实例代码给大家介绍了vue和webpack项目构建过程常用的npm命令,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了vue 获取url里参数的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Antd表格滚动 宽度自适应 不换行的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论