iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >Vue怎么使用axios发送请求
  • 119
分享到

Vue怎么使用axios发送请求

2023-07-05 20:07:18 119人浏览 独家记忆
摘要

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

本文小编为大家详细介绍“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发送请求”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网精选频道。

--结束END--

本文标题: Vue怎么使用axios发送请求

本文链接: https://www.lsjlt.com/news/355315.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue怎么使用axios发送请求
    本文小编为大家详细介绍“Vue怎么使用axios发送请求”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue怎么使用axios发送请求”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。例:当我们在APP组件的子组件...
    99+
    2023-07-05
  • vue怎么使用axios发送ajax请求
    在vue中使用axios发送ajax请求的方法:1.新建vue.js项目;2.使用npm命令下载axios;3.使用import方法导入axios;4.执行代码发送ajax请求;具体步骤如下:首先,在vue-cli中创建一个vue.js项目...
    99+
    2024-04-02
  • Vue中怎么使用axios发送post请求
    Vue中怎么使用axios发送post请求,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。vue-resource不再维护之后,我也用起了a...
    99+
    2024-04-02
  • vue cli3项目中怎么使用axios发送post请求
    今天小编给大家分享一下vue cli3项目中怎么使用axios发送post请求的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了...
    99+
    2023-06-29
  • react怎么发送axios请求
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么发送axios请求?React中使用axios发送请求的常用方法React中安装并引入axios依赖在React项目中使用axios请求,首...
    99+
    2023-05-14
    React
  • Vue使用axios发送请求简单实现代码
    上一篇文章我们在vue工程项目中引入了axios库并将通用的API进行了封装,但是遇到了一个问题就是我们在组件内部写的函数发送请求是不会被vue实例进行执行的,也就是说VC中的函数无...
    99+
    2023-05-14
    Vue axios发送请求 Vue axios请求
  • vue怎么使用vue-resource发送ajax请求
    在vue中使用vue-resource发送ajax请求的方法:1.新建vue.js项目;2.使用npm命令下载vue-resource;3.使用import方法导入vue-resource;4.执行代码发送ajax请求;具体步骤如下:首先,...
    99+
    2024-04-02
  • vue cli3 项目中如何使用axios发送post请求
    目录使用axios发送post请求首先需要安装对应的第三方包发送post请求 发送get请求将index.js中再添加如下代码vue使用axios的踩坑记录axios跨域解...
    99+
    2024-04-02
  • React中如何使用axios发送请求
    小编给大家分享一下React中如何使用axios发送请求,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!React中安装并引入axios依赖在React项目中使用a...
    99+
    2023-06-20
  • react如何发送axios请求
    这篇文章主要介绍了react如何发送axios请求的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react如何发送axios请求文章都会有所收获,下面我们一起来看看吧。react发送axios请求的方法:1、通...
    99+
    2023-07-04
  • Vue axios库发送请求的示例介绍
    目录1.什么是axios2.axios请求图例3.使用 async 和 await 配合 axios 发起请求4.使用解构赋值5.使用 axios.get() axios.post(...
    99+
    2022-11-13
    Vue axios发送请求 Vue axios请求
  • vue怎么发送ajax请求
    这篇文章主要讲解了“vue怎么发送ajax请求”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue怎么发送ajax请求”吧!首页安装并引入axios1、npm install axios -...
    99+
    2023-07-04
  • Vue通过axios发送ajax请求基础演示
    在Vue中是不支持发送ajax请求的,如果我们要在Vue中发送ajax请求,我们需借助第三方插件常用发送ajax请求插件有两个 vue-resource和axios,Vue.js 2...
    99+
    2023-02-18
    Vue通过axios发送ajax请求 简单的axios发送get请求 axios通过get传参 简单的axios发送post请求 axios通过params参数
  • vue项目中如何使用axios发送请求让ajax请求头部携带cookie
    这篇文章主要为大家展示了“vue项目中如何使用axios发送请求让ajax请求头部携带cookie”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue项目中如何...
    99+
    2024-04-02
  • Vue项目如何创建首页发送axios请求
    这篇文章主要介绍了Vue项目如何创建首页发送axios请求的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue项目如何创建首页发送axios请求文章都会有所收获,下面我们一起来看看吧。这是个全新的Vue项目,引...
    99+
    2023-07-05
  • 怎么用vue封装axios请求
    这篇文章将为大家详细讲解有关怎么用vue封装axios请求,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。其实vue封装axios是很简单的首先 在src路径下建http文件夹 并且创建api.js env...
    99+
    2023-06-15
  • vue中怎么利用resource发送请求
    本篇文章给大家分享的是有关vue中怎么利用resource发送请求,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。vue resource发送请...
    99+
    2024-04-02
  • 怎么使用Postman发送POST请求
    本篇内容介绍了“怎么使用Postman发送POST请求”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、创建一个PHP文件,用于接收POST...
    99+
    2023-07-06
  • Vue取消Axios发出的请求
    目录一、前言二、AbortController三、CancelToken一、前言 有的时候我们需要取消axios发出的请求,例如在退出页面时,取消掉仍然在进行的请求。 二、Abort...
    99+
    2024-04-02
  • React中使用axios发送请求的几种常用方法
    目录React中安装并引入axios依赖 使用axios进行GET请求 使用axios.get方式 使用axios(config {...}) 使用axios进行POST请求 使用a...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作