Vue使用axios发送请求简单实现代码
上一篇文章我们在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 nextTick获取更新后的DOM的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
Element UI中v-infinite-scroll无限滚动组件使用详解
在移动端数据的更新中许多方法孕育而生,无限滚轮也是解决的方案一种,Element-ui为vue开发了一个事件（v-infinite-scroll）,下面这篇文章主要给大家介绍了关于Element UI中v-infinite-scroll无限滚动组件使用的相关资料,需要的朋友可以参考下2023-02-02
今天小编就为大家分享一篇解决vue 项目引入字体图标报错、不显示等问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性，在组件或界面中不使用mapGetter调用映射vuex中的getter，在组件或界面中使用mapGetter调用映射vuex中的getter，具体内容跟随小编一起通过本文学习吧2021-07-07
本文主要介绍了vue菜单栏联动内容页面tab的实现示例,左侧菜单栏与右侧内容部分联动,当点击左侧的菜单,右侧会展示对应的tab,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
vite+ts vite.config.ts使用path报错问题及解决
这篇文章主要介绍了vite+ts vite.config.ts使用path报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要给大家介绍了关于vue使用keep-alive后清除缓存的相关资料,这个问题在我们日常工作中经常会用到,本文通过示例代码介绍的非常详细,需要的朋友可以参考下2021-08-08
Form组件提供了表单验证的功能,只需要通过属性传入约定的验证规则,并将Form-Item的属性设置为需校验的字段名即可,下面这篇文章主要给大家介绍了关于Element中el-form表单的相关资料,需要的朋友可以参考下2023-01-01
解决vue3+vite配置unplugin-vue-component找不到Vant组件
这篇文章主要为大家介绍了vue3+vite配置unplugin-vue-component找不到Vant组件问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要为大家详细介绍了vue iview实现分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论