vue使用axios时this指向哪里

这次给大家带来vue使用axiosthis指向哪里,使用vue调用axios时的this注意事项有哪些,下面就是实战案例,一起来看一下。

vue使用axios时this指向哪里

本文主要介绍了关于vue使用axios时this的指向问题,下面话不多说了,来一起看看详细的介绍吧。

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. 题外话

使用”=>”函数,就可以告别之前的两种写法了:

bind(this)来改变匿名函数的this指向

hack写法 var _this= this; :

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

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

JS怎样将json格式数组下载到excel表格里

怎样操作jackson解析json字符串时首字母的大小写转换

Angular验证功能实现步奏

立即学习“前端免费学习笔记(深入)”;

以上就是vue使用axios时this指向哪里的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2772494.html

(0)
上一篇 2025年3月8日 13:19:02
下一篇 2025年3月8日 13:19:14

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • axios如何给上传图片添加进度条

    这次给大家带来axios如何给上传图片添加进度条,axios给上传图片添加进度条的注意事项有哪些,下面就是实战案例,一起来看一下。 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 Featu…

    编程技术 2025年3月8日
    200
  • axios客户端中ajax请求方式

    这次给大家带来axios客户端中ajax请求方式,axios客户端中使用ajax请求方式的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 AJAX,Asynchronous JavaScript and XML (异步的JavaSc…

    编程技术 2025年3月8日
    200
  • axios使用步骤详解(附代码)

    这次给大家带来axios使用步骤详解(附代码),使用axios的注意事项有哪些,下面就是实战案例,一起来看一下。 Axios是一个基于Promise的 HTTP 库,可以用在浏览器和node.js 中,因为尤大大的推荐,axios也变得越来…

    编程技术 2025年3月8日
    200
  • JavaScript面向对象与this指向(附代码)

    这次给大家带来JavaScript面向对象与this指向(附代码),使用JavaScript面向对象与this指向的注意事项有哪些,下面就是实战案例,一起来看一下。 我们的程序语言经历了从“面向机器”、到“面向过程”、再到“面向对象”的一个…

    编程技术 2025年3月8日
    200
  • vue axios请求超时处理详解(附代码)

    这次给大家带来vue axios请求超时处理详解(附代码),vue axios请求超时处理详解的注意事项有哪些,下面就是实战案例,一起来看一下。 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或…

    2025年3月8日 编程技术
    200
  • axios拦截器

    这次给大家带来axios拦截器,使用axios拦截器的注意事项有哪些,下面就是实战案例,一起来看一下。 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端.这篇文章主要介绍了vue/axios请求拦截的相…

    编程技术 2025年3月8日
    200
  • JavaScript调用模式与this关键字绑定的关系

    这篇文章主要介绍了javascript调用模式与this关键字绑定的关系 的相关资料,需要的朋友可以参考下 Invocation 调用 调用一个函数将暂停当前函数的执行,传递控制权和参数给新函数。 实参与形参不一致不会导致运行时错误,多的被…

    编程技术 2025年3月8日
    200
  • JS调用模式与this关键字使用详解

    这次给大家带来JS调用模式与this关键字使用详解,JS调用模式与this关键字使用的注意事项有哪些,下面就是实战案例,一起来看一下。 Invocation 调用 调用一个函数将暂停当前函数的执行,传递控制权和参数给新函数。 实参与形参不一…

    编程技术 2025年3月8日
    200
  • vue中ajax请求与axios包完美处理

    这次给大家带来vue中ajax请求与axios包完美处理,vue中ajax请求与axios包处理的注意事项有哪些,下面就是实战案例,一起来看一下。 在vue中,经常会用到数据请求,常用的有:vue-resourse、axios 今天我说的是…

    编程技术 2025年3月8日
    200
  • vue axios请求拦截实现思路(附代码)

    这次给大家带来vue axios请求拦截实现思路(附代码),实现vue axios请求拦截的注意事项有哪些,下面就是实战案例,一起来看一下。 axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP …

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论