温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue怎么使用axios发送请求

发布时间:2023-04-04 10:25:07 来源:亿速云 阅读:110 作者:iii 栏目:开发技术

本文小编为大家详细介绍“Vue怎么使用axios发送请求”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue怎么使用axios发送请求”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

例:当我们在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发送请求”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI