浅谈vue使用axios的回调函数中this不指向vue实例,为undefined

今天在vue-cli脚手架搭建的项目中使用axios时，遇到无法解析this.$route的报错信息，最后发现是作用域的问题。

1.解决方法：使用 =>

原代码：

axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

修改为：

axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then((response) => {
  console.log(response);
 })
 .catch((error) => {
  console.log(error);
 });

2.=>解析

在JS中，箭头函数并不是简单的function(){}匿名函数的简写语法糖，实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，在编写函数时就已经确定了，由上下文确定。而匿名函数的this指向运行时实际调用该方法的对象，无法在编写函数时确定。

不可以当做构造函数，也就是说，不可以使用 new 命令，否则会抛出错误。

this、arguments、caller等对象在函数体内都不存在。

不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

箭头函数除了传入的参数之外，其它的对象都没有！在箭头函数引用了this、arguments或者参数之外的变量，那它们一定不是箭头函数本身包含的，而是从父级作用域继承的。

补充知识：axios 中请求的回调函数中的this指针问题

请看下面两组代码

①

this.axios.post(url, data)
.then(function(result) {
var resData = result.data
console.log(resData)
if (resData.status === 1) {
} else {
}
})
.catch(function (error) {
console.log(error)
})

②

this.axios.post(url, data)
.then((result) => {
var resData = result.data
console.log(resData)
if (resData.status === 1) {
} else {
}
})
.catch(function (error) {
console.log(error)
})

这两组代码的差别在于：请求成功后的回调函数，一个使用匿名函数，一个使用箭头函数

匿名函数的指针指向->函数操作的本身

箭头函数的指针指向->组件

也就是说当你需要使用到组件中声明的变量或者函数，就需要使用箭头函数

以上这篇浅谈vue使用axios的回调函数中this不指向vue实例,为undefined就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue使用axios时关于this的指向问题详解

    前言 众所周知axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios.更多的详细介绍大家可以参考这里://www.jb51.net/article/109444.htm 本文主要介绍了关于vue使用axios时this的指向问题,下面话不多说了,来一起看看详细的介绍吧. 1.解决办法 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函

  • 在vue组件中使用axios的方法

    现在我们通过webpack+vue-cli搭建起了一个vue项目的框架,如果我们需要在vue组件中使用axios向后台获取数据应该怎么办呢? 通常情况下,我们搭建好的项目目录应该是这样子的 首先需要安装axios,这个会npm的都知道 下一步,在main.js中引入axios import axios from "axios"; 与很多第三方模块不同的是,axios不能使用use方法,转而应该进行如下操作 Vue.prototype.$axios = axios; 接着,我们就可以在A

  • VUE中使用HTTP库Axios方法详解

    VUE中使用HTTP库Axios方法详解

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 安装Axios模块 在Vue中使用,最好安装两个模块axios 和vue-axios $npm install axios vue-axios --save 然后引用并使用模块 import Axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,Axios) 在组件中通过如下方式进行使用 this.$http[meth

  • 浅谈vue使用axios的回调函数中this不指向vue实例,为undefined

    今天在vue-cli脚手架搭建的项目中使用axios时,遇到无法解析this.$route的报错信息,最后发现是作用域的问题. 1.解决方法:使用 => 原代码: axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 修改为: axios.get('/u

  • 浅谈jQuery hover(over, out)事件函数

    hover(over, out)事件函数 当鼠标移动一个匹配的元素上面,会触发指定的第一个函数 当鼠标移出这个元素时,会触发指定的第二个函数 over(function):鼠标移到元素上触发的函数 out(function):鼠标移出元素触发的函数 <nav class="main-nav"> <a href="/"><span>首页</span></a> <a href="/about&q

  • 浅谈C语言之字符串处理函数

    下面介绍8种基本的常用的字符串处理函数,在数值数组中也常常用到(部分函数).所有的C语言编译系统中一般都提供这些函数. 1.puts函数--输出字符串的函数 一般的形式为puts(字符串组) 作用:将一个字符串输出到终端.如,char一个string,并赋予初值.调用puts(string);进行字符串的输出. 2.gets函数--输入字符串的函数 一般的形式:gets(字符数组) 作用:从终端输入一个字符串到字符数组,并且得到一个函数值成为字符数组的起始地址. gets(str); 键盘输入,

  • 浅谈linux下的一些常用函数的总结(必看篇)

    1.exit()函数 exit(int n)  其实就是直接退出程序, 因为默认的标准程序入口为int main(int argc, char** argv),返回值是int型的. 一般在shell下面,运行一个程序,然后使用命令echo $?就能得到该程序的返回值,也就是退出值,在main()里面,你可以用return n,也能够直接用exit(n)来做.unix默认的习惯正确退出是返回0,错误返回非0. 重点:单独的进程是返回给操作系统的.如果是多进程,是返回给父进程的. 在父进程里面调用w

  • 浅谈C++类型转化(运算符重载函数)和基本运算符重载(自增自减)

    类型转化(运算符重载函数) 用转换构造函数可以将一个指定类型的数据转换为类的对象.但是不能反过来将一个类的对象转换为一个其他类型的数据(例如将一个Complex类对象转换成double类型数据).在C++提供类型转换函数(type conversion function)来解决这个问题.类型转换函数的作用是将一个类的对象转换成另一类型的数据. 类型转换函数的一般形式为: operator 类型名( ){ 实现转换的语句 } 下面是简单实现.这时候,Base起了两方面的作用:类和数据类型.系统会在

  • 浅谈python3打包与拆包在函数的应用详解

    1.序列(拆包) *用作序列拆包:*可对字符串.列表.集合.元组.字典.数字元素等序列进行拆包 print(*(1,2,3,4,5,6)) #1 2 3 4 5 6 print(*[1,2,3,4,5,6]) #1 2 3 4 5 6 序列拆包赋值: 注意:*变量 不能在第一个位置,否则会报错 a, b, *c = 0, 1, 2, 3 #获取剩余部分 a, *b, c = 0, 1, 2, 3 #获取中间部分 a, b, *c = 0, 1 a, *b, c = 0, 1 优先对位置变量赋值,

  • 浅谈do {...} while (0) 在宏定义中的作用

    如果你是一名C程序员,你肯定很熟悉宏,它们非常强大,如果正确使用可以让你的工作事半功倍.然而,如果你在定义宏时很随意没有认真检查,那么它们可能使你发狂,浪费N多时间.在很多的C程序中,你可能会看到许多看起来不是那么直接的较特殊的宏定义. 下面就是一个例子: #define __set_task_state(tsk, state_value) \ do { (tsk)->state = (state_value); } while (0) 在Linux内核和其它一些著名的C库中有许多使用do{..

  • ajax异步回调函数中给外部变量赋值的问题探讨

    复制代码 代码如下: <!doctype html> <head> <meta charset="utf-8"> </head> <body> <script src="http://localhost/UIBMSPHPProj/public/js/jquery-1.8.2.min.js"></script> <script> $(function(){ var str

  • 关于javascript 回调函数中变量作用域的讨论

    1.背景 Javascript中的回调函数,相信大家都不陌生,最明显的例子是做Ajax请求时,提供的回调函数, 实际上DOM节点的事件处理方法(onclick,ondblclick等)也是回调函数. 在使用DWR的时候,回调函数可以作为第一个或者最后一个参数出现,如: JScript code function callBack(result){ } myDwrService.doSomething(param1,param2,callBack);//DWR的推荐方式 //或者 myDwrSer

  • python回调函数中使用多线程的方法

    下面的demo是根据需求写的简单测试脚本 #!/usr/bin/env python # coding: utf-8 # 第一个列表为依赖组件和版本号,后面紧跟负责人名称 # 接着出现第二个以来组建列表,负责人为空了 # 所以根据需求需要对组件.版本号.负责人进行不同处理 # 这时在for循环中根据if判断,写回调函数处理 # 格式不一致数据的测试数据 a = [[u'tool-1', u'1.9.13'], u'xiaowang', u'xiaoqu', [u'tool-2', u'1.9.2

随机推荐