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发送请求内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue axios接口请求封装方式

    目录 vue axios接口请求封装 总结 vue axios接口请求封装 简易记录一下最近用到的比较顺手的.axios接口请求的封装 1.新建network文件夹,其内新建request.js 设置一个 baseURL ,便于为axios实例传递相对url 2.新建api文件夹,其内新建index.js.home.js index.js主要是为了便于导出可能有多个页面相关的请求 home.js中主要封装有关home页的请求操作,这里名字随便取即可 3.在main.js中导入/api/index

  • Vue通过axios发送ajax请求基础演示

    在Vue中是不支持发送ajax请求的,如果我们要在Vue中发送ajax请求,我们需借助第三方插件常用发送ajax请求插件有两个 vue-resource和axios,Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求. axios项目源码 https://github.com/axios/axios axios引入方式 npm方式: npm install axios bower方式 bower install axios yarn方式 yarn add axios CDN方

  • Vue axios库避免重复发送请求的示例介绍

    目录 目的 文件结构 实现 请求拦截 响应拦截 取消重复发送请求 调用 目的 实现请求拦截 实现响应拦截 常见错误处理 不能请求头设置 api 集中式管理 (取消重复请求,重复发送请求, 请求缓存等情况均还未实现) 文件结构 实现 index.js内代码如下: 引入 // 引入 axios import axios from 'axios'; // 请求配置单独写一个文件 baseurl.js import serverConfig from './baseurl.js' 创建一个实例 cons

  • Vue简单封装axios网络请求的方法

    Vue简单封装axios网络请求的方法

    目录 Vue简单封装axios网络请求 一.utils下的httpUtils.js: 二./api下的path.js: 三./api下的index.js: 四.组件中引入并请求: Vue简单封装axios网络请求 一.utils下的httpUtils.js: import axios from 'axios'; import querystring from 'querystring'; const errorHandler = (status, info) => { switch(status

  • Vue如何处理Axios多次请求数据显示问题

    目录 Vue处理Axios多次请求数据显示 服务端代码 客户端代码 vue axios多次请求一个接口取消前面请求 方法一 方法二 总结 Vue处理Axios多次请求数据显示 场景: 一个搜索框,要求用户输入内容改变之后立即进行搜索 遇到的问题: 用户频繁的进行搜索词修改,会触发很多次搜索请求,如果请求有延时,就会出现显示不正确的现象 比如下面这个例子: 请求1发出后,存在延时大,响应1后返回: 请求2发出后,延时小,响应2先返回: 最后显示的内容是响应1: 而我期待的显示内容,是最后一次的请求

  • Vue之Axios的异步请求问题详解

    目录 遇到的问题 总结 遇到的问题 在目前一个需求中,我需要等待axios请求完成后,判断请求是否出现异常,然后来判断是否关闭弹窗 修改后大概代码如下: async submitForm() { let flag = false //表单验证,默认通过 let formValidation = true this.$refs['vForm'].validate(valid => { if (!valid){ formValidation = false } //TODO: 提交表单 }) if

  • Vue使用axios发送请求简单实现代码

    上一篇文章我们在vue工程项目中引入了axios库并将通用的API进行了封装,但是遇到了一个问题就是我们在组件内部写的函数发送请求是不会被vue实例进行执行的,也就是说VC中的函数无法直接的由VM去接管执行,这时我们需要将这个请求的执行函数位置调到APP这个父组件上去,因为只有APP组件被所谓的VM给接管了的,其他的组件都是APP组件的子组件. 例:当我们在APP组件的子组件UserLogin组件中写到登录函数: login(){ console.log('登录') let params = {

  • Vue使用axios发送请求并实现简单封装的示例详解

    目录 一.安装axios 二.简单使用 1.配置 2.发送请求 三.封装使用 1.创建js封装类 2.配置 3.发送请求 一.安装axios npm install axios --save 二.简单使用 1.配置 main.js中加入如下内容 // 引入axios --------------------------------------------------- import axios from 'axios' Vue.prototype.$axios = axios Vue.proto

  • vue项目使用axios发送请求让ajax请求头部携带cookie的方法

    最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知axios默认是不让ajax请求头部携带cookie的,因此,在main.js中设置如下: import axios from 'axios' axios.defaults.withCredentials=true;//让ajax携带cookie Vue.prototype.$axios = axios

  • 解决vue处理axios post请求传参的问题

    很多朋友在使用vue的过程中肯定会用到axios 请求,包括现在vux中已经自带了axios,而且用法也很简单,文档中写的比较清楚,但是当我们使用post提交时,却发现有时候会出现参数没有发送到服务器的问题,我记得文档中也说了这一情况的出现,在这里我把这设置情况记录下来,方便下次需要的时候直接使用.不需要翻阅旧代码了. 下面是vux中的使用方式,很简单,把代码放置在main.js中就可以了.如果仅仅使用了vue的话,直接安装了axios的话,设置方式也雷同,就不记录了. import qs fr

  • vue 使用axios 数据请求第三方插件的使用教程详解

    axios 基于http客户端的promise,面向浏览器和nodejs 特色 •浏览器端发起XMLHttpRequests请求 •node端发起http请求 •支持Promise API •监听请求和返回 •转化请求和返回 •取消请求 •自动转化json数据 •客户端支持抵御 安装 使用npm: $ npm i axiso 为了解决post默认使用的是x-www-from-urlencoded 去请求数据,导致请求参数无法传递到后台,所以还需要安装一个插件QS $ npm install qs

  • Vue中 axios delete请求参数操作

    vue中axios 的delete和post,put在传值上有点区别 post和put有三个参数,url,data和config,所以在使用这两个时,可以写成axios.post(api,{id:1}),axios.put(api,{id:1}),但是delete只有两个参数:url和config,data在config中,所以需要写成 axios.delete(api,{data:{id:1}}) 如果是服务端将参数当作Java对象来封装接收则 参数格式为: {data: param} var

  • 解决vue项目axios每次请求session不一致的问题

    1.vue开发后台管理项目,登录后,请求数据每次session都不一致,后台返回未登录,处理方法打开main.js设置: // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' imp

  • Java HtmlEmail 邮件发送的简单实现代码

    Java HtmlEmail 邮件发送的简单实现代码

    Java 项目中常常回遇到发送邮件 Java 发送邮件有几种,今天先给大家介绍用 HtmlEmail 来发送邮件,我这里是用 Maven 来搭建的 HtmlEmail 可以抄带HTML 首先 需要导入jar 包 <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-email</artifactId> <version>1.4</versio

  • React中使用axios发送请求的几种常用方法

    目录 React中安装并引入axios依赖 使用axios进行GET请求 使用axios.get方式 使用axios(config {...}) 使用axios进行POST请求 使用axios.post 使用axios(config {...}) 同时发送多个请求 详细config对象配置项 axios的返回值对象response axios的全局配置 axios的单一实例化配置 axios拦截器的使用 React中安装并引入axios依赖 在React项目中使用axios请求,首先需要安装ax

  • Vue.js实战之使用Vuex + axios发送请求详解

    前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma

随机推荐