精华内容
下载资源
问答
  • 最近在学习使用vue+axios,在使用中发现了一个问题,下面总结分享给大家,这篇文章主要给大家介绍了关于vue使用axios时this的指向问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
  • 使用axios的时候里面的this是undefined,而不是vue,留意 可以在axios外用变量var this=this方便后面调用, 或者.then的时候用箭头函数也可以解决

    在使用axios的时候里面的this是undefined,而不是vue,留意

    可以在axios外用变量var this=this方便后面调用,

    或者.then的时候用箭头函数也可以解决

    展开全文
  • vue 内部使用axios需注意this使用 共有三种写法,注意 第一种的坑!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pay attention to this when ...

    三种写法

    以下有三种写法,注意 第一种 的坑!!!其余两种任意采用一种皆可。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Pay attention to this when using Axios in Vue.</title>
    </head>
    <body>
    <div id="app">
        <input type="button" value="this get请求" @click="thisGet">
        <input type="button" value="self get请求" @click="selfGet">
        <input type="button" value="other get请求" @click="otherGet">
        <input type="text" v-model="text">
    </div>
    <!-- development version, includes helpful console warnings -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                text: 'test',
                url: 'http://localhost/api/test',
            },
            methods: {
                // fail
                thisGet(){
                    console.log('thisGet-start');
                    console.log('origin:'+this.text);
                    axios.get(this.url).then(
                        function(res){
                            console.log(res.status);
                            this.text = 'thisGet:'+res.status;
                            console.log('thisGet-end:'+this.text);
                        }
                    );
                },
                // success
                selfGet(){
                    console.log('selfGet-start');
                    console.log('origin:'+this.text);
                    let self = this;
                    axios.get(self.url).then(
                        function(res){
                            console.log(res.status);
                            self.text = 'selfGet:'+res.status;
                            console.log('selfGet-end:'+self.text);
                        }
                    );
                },
                // success
                otherGet(){
                    console.log('otherGet-start');
                    console.log('origin:'+this.text);
                    axios.get(this.url).then((res) => {
                            console.log(res.status);
                            this.text = 'otherGet:'+res.status;
                            console.log('otherGet-end:'+this.text);
                        },function(error) {
                            console.log(error);
                        }
                    );
                },
            },
        });
    </script>
    </body>
    </html>
    

    测试结果

    在这里插入图片描述

    箭头函数与 关键词function的区别

    参考:https://blog.csdn.net/github_38851471/article/details/79446722

    展开全文
  • 在vue较多使用的是axios请求,请求后的回调函数中,this不能指向当前vue实例,打印出来是undefined; 1,let that = this,以前常用的存储this的方法 getSerTime:function(){ let that = this ;//存储this Vue...

    在vue较多使用的是axios请求,请求后的回调函数中,this不能指向当前vue实例,打印出来是undefined;

    1,let that = this,以前常用的存储this的方法

    getSerTime:function(){
        let that = this ;//存储this
        Vue.axios.get(root + '/api/findInfoDetail').then((response) => {
            console.log(response.data);
            console.log(this);
            console.log(that);
        })
    }

    2.使用箭头函数

    Vue.axios.get(root +'/api/findInfoDetail',{params:{notid:this.searchData.notId,type:this.searchData.type}}).then((response) => {
        console.log(response.data);
        console.log(this);
        //箭头函数内部的this是词法作用域,是由外层调用者vue来确定,使用箭头函数之后,箭头函数指向的函数内部的this已经绑定了外部的vue实例了
    })
    展开全文
  • vue使用axiosthis 指向问题

    千次阅读 2017-12-21 22:51:57
    1.解决办法在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数”=>”来解决。如下:methods: { loginAction(formName) { this.$axios.post('http://127.0.0.1/u/subLogin',...

    1.解决办法

    在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数”=>”来解决。如下:

    methods: {
          loginAction(formName) {
            this.$axios.post('http://127.0.0.1/u/subLogin', {
              username: this.username,
              password: this.password
            })
              .then(function(response){
                   console.log(this); //这里 this = undefined
              })
              .catch((error)=> {
                console.log(error); //箭头函数"=>"使this指向vue
              });
    
            });
          }
    }

    2. 原因

    ES6中的 箭头函数 “=>” 内部的this是词法作用域,由上下文确定(也就是由外层调用者vue来确定)。

    3. 题外话

    使用”=>”函数,就可以告别之前的两种写法了:
    1. bind(this)来改变匿名函数的this指向
    2. hack写法 var _this= this;

    loginAction(formName) {
    var _this= this;
    this.$axios.post("...")
    .then(function(response){
    console.log(_this); //这里 _this 指向vue
    })
    });
    }

    展开全文
  • vue在使用ts如何使用axios

    千次阅读 2019-07-08 09:19:26
    在vue中使用typescript,当你想要在全局按照this.$axios这种形式来使用axios话,我们首先要将axios挂载到vue的原型上,使之能够在全局使用。 Vue.use(v => { v.prototype.$axios = axios }) 但是,这样还...
  • vue 使用 axios post 请求方法传参无法发送至后台 vue 框架推荐使用 axios 插件发送数据,使用 axios 插件结合 qs 插件实现 post 传参不报错。 安装插件 npm install --save axios npm install --save qs
  • vue中使用axiosthis.$post 方法

    万次阅读 2019-11-18 10:56:53
    1.安装 axios 与 vue-axios npm install axios npm install vue-axios 在页面import 刚刚安装的两个工具包 import VueAxios from 'vue-axios' import axios from 'axios' Vue.use(VueAxios, axios) 下面我们...
  • 错误例子: data() { return { title: '生命周期', cera: '', money: 1 * 5 * 6 * 4, //listuser用于接收axios返回的数据 listuser:'', ... this.$axios.get('/api/ListUs...
  • 一、在需要的页面引用 axios ...引入使用axios import axios from "axios" 发送基本的请求 axios({ url:"http://api.github.com/users" }).then( (result) => { console.log(result);
  • 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined。 如下图所示,我们有一个 login 方法,希望在登录成功之后路由到主页,但通过 this.$router 获取路由器出错。 解决方案 使用箭头函数...
  • Vue使用axios无法读取data的解决办法

    千次阅读 2019-08-11 14:28:48
    Vue使用axios,then方法中无法读取到data中的数据,提示Cannot set property 'xxx' of undefined 解决方法: let self=this; axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { ...
  • 主要介绍了浅谈vue使用axios的回调函数中this不指向vue实例,为undefined,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 使用axios

    2018-03-31 11:49:26
    参考链接 axios官网 npm package npm npm i axios --save-dev main.js import Vue from 'vue' import axios from 'axios' ...Vue.prototype.$axios = axios ...this.$axios({url: url,method:method})....
  • 之前一直用的是vue-resource,但是vue2.0后,尤大大说官方不在推荐vue-resource了,于是开始学习使用axios。安装axios:npm install axios看起来是很正常的npm安装依赖,axios官方也是这样推荐安装。但是,这时候坑...
  • 使用axios上传照片

    万次阅读 2017-08-07 22:00:55
    原来使用vue1.0的时候,我们一直使用ajax来发送请求,当接触新的项目的时候,我们使用了vue2.0,结合着使用axios来代替ajax。安装axios的话:1-利用npm安装npm install axios –save2、 利用bower安装bower install...
  • 使用axios发送请求

    千次阅读 2020-04-07 18:13:24
    声明: 本文主要是照着官网教学自己对部分知识敲了一遍,纯属动手练习,没什么技术含量...axios发送请求的语法: 写法一(以get为例): axios({ method: 'get', url: 'https://github.com/axios/axios', data: { ...
  • axios简述及vue中使用axios(详)

    千次阅读 2019-11-02 14:24:55
    文章目录axios 简述axios 对比与ajax优缺点axios使用axios的安装axios使用常规使用axios APIaxios的并发(axios.all,axios.spread)请求方法别名传值常见的问题总结 要想学会一个东西,先深刻了解这个东西才是...
  • 下载并使用axios

    万次阅读 2019-03-06 17:03:05
    1.在当前项目根目录下打开终端,下载axios npm install axios -s 2.下载成功后,配置文件出现相应依赖 3.在src文件下的main.js文件中导入axios import axios from 'axios' Vue.prototype.$axios= ... this.$axios(...
  • Vue使用element-ui,点击button显示正在加载并请求接口,完成后关闭正在加载。...Vue使用axios请求接口,代码片段: this.$axios.post(urlRegister, qs.stringify(rParams) ).then(function (response) { this...
  • 目前遇到最大的问题是在使用axios.post的请求向Java后端传入入参,后端无法接收到参数。在这里主要处理移动端浏览器兼容的问题。 在这里我提供了两种解决办法: 一、URLSearchParams.append()方法 由于...
  • 在java环境下使用axios.post请求后台,无法接收到入参
  • 使用 axios 详解

    千次阅读 2017-08-22 00:34:22
    Vue.js 1.0 我们常使用 vue-resource (官方ajax库), Vue 2.0 发布后作者宣告不再对 vue-resource 进行更新, 推荐我们使用 axios (基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用) 安装 axios ...
  • axios使用

    万次阅读 多人点赞 2019-06-10 23:14:46
    首先要在项目目录下使用如下命令下载axios $npm i axios -S 而后在src目录下创建requests文件夹,里面用来存放你整个项目的ajax请求。 此文件夹中首先创建一个index.js文件 编写里面的内容: //引入axios import ...
  • axios使用

    千次阅读 2018-01-09 10:20:33
    axios和vue-resource一样,是一个vue中操作http的插件,遵循promise,vue官方也...axios也是在运行需要的,所以要保存在dependencies中。 引入axios import axios from 'axios' Vue.prototype.$http = axi...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,407
精华内容 21,362
关键字:

使用axios时无法使用this