vue使用axios时this问题笔记

最新推荐文章于 2024-07-20 21:05:24 发布
原创 最新推荐文章于 2024-07-20 21:05:24 发布 · 909 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在使用Axios进行异步请求时，遇到的this上下文丢失问题。详细介绍了两种解决方法：一是在Axios外部声明变量var this=this；二是使用箭头函数确保this指向正确。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

【Vue3笔记02】Vue3项目工程中使用axios网络请求库实现前后端数据通信
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
03-23 511
一般在实际的项目开发中，我们都是会在src目录下，创建一个api目录，然后在这个目录里面创建对应的js文件，在每一个js文件里面定义好具体的接口请求，这样在其他地方就只需要导入对应的请求方法就可以完成接口请求啦。上面只是简单的工具类代码，后续可以根据实际的需要，加上对应的逻辑判断，例如：根据状态码，判断用户是否有权限、用户是否登录、请求头加上token等等操作。前面一个步骤可有可无，根据你自己的项目情况来决定，如果你想在任意的地方都可以直接使用axios，那么就可以加上前一个步骤的配置。
Vue笔记-在axios中的than函数中使用this需要注意的地方
IT1995的博客
12-11 1491
在Vue中，可以使用this关键字来访问到组件中定义的变量。然而，在axios的then函数中，this关键字的作用域会改变，会指向axios对象本身而不是Vue组件实例。使用箭头函数的好处是不需要额外保存this关键字的值，直接在then函数中使用this关键字来访问Vue组件的变量即可。解决这个问题的一种方法是将Vue组件中定义的变量保存到一个变量中，然后在axios的then函数中使用该变量。另外，也可以使用箭头函数来解决this关键字作用域的问题，因为箭头函数会继承父级作用域的this值。
axios then 里面不能用 this ，改变 data 失效
hqweay 的博客
07-24 8071
axios.get('https://www.apiopen.top/satinCommentApi?id=27610708', { params: { } }).then(function(data) { Vue...
Vue解惑——axios中this的指向问题
一只彩乌鸦
09-11 9182
Vue——axios中this的指向问题 场景 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在进行Vue实验时，需要用到axios进行接口请求，并将返回的内容传递到Vue的data选项中。正常情况下，会使用this.list = response.data的格式进行赋值，但this的指向恰恰是最容易被忽略的地方。 出现的问题： 在vue中使用axios做网络请求的时候，会遇到this不指向vue，而指向其它地方的情况。如下图所示： 通过在网络上搜索，有很
axios 简单用法
szzwyy的博客
12-25 587
第一步：npm i axios 第二步：在main.js中引入如下 import axios from 'axios' Vue.prototype.$axios = axios import axios from 'axios' Vue.prototype.$axios = axios
axios中的this指向问题
weixin_63267832的博客
03-18 478
axios中this指向问题的介绍
2024年Web前端最新vue工程 axios请求数据传统使用方法介绍+经验优化使用方法，2024大厂前端面试最火问题
2401_84619432的博客
05-05 602
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】vue工程 axios请求数据使用传统介绍+经验优化一、axios介绍=========在vue高版本项目中，很多使用axios进行ajax请求，而不再使用vue-resource了。
vue学习笔记（十一）——开发心得（axios的封装、promise细节、vue-router开发中的使用、vuex在开发中的使用）
weixin_56370772的博客
07-20 1179
1.1 为什么要封装api?代码分层，便于以后的修改，无需触碰逻辑页面根地址并使用默认导出将 axios 导出。每个模块中，只允许使用唯一的一次 export default，否则会报错！统一管理所有需要的url地址，封装网络请求的方法并导出。如在 api 目录下新建 home.js 用于统一管理首页 Home 组件中的所有网络请求index.js接口API 后缀。
Vue学习笔记（二）—— vue项目中使用axios
Stephy_Yy
12-15 553
一、文档连接 axios文档 vue开发插件 二、axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF...
vue+axios 实现Excel下载
XiChuan的博客
12-27 3871
以前写过关于Springboot提供Excel文件下载的博客:https://blog.youkuaiyun.com/zc_ad/article/details/85242556,当点击下载的api地址时，就可以直接下载，或我们在前端页面直接使用<a>标签，href指向下载地址，我们也可以进行下载。 但是....,<a>标签无法进行设置表头，也无法进行参数的传递，确实是一个头疼的问...
关于axios不能使用Vue.use()浅析
08-28
主要给大家介绍了关于axios不能使用Vue.use()的相关资料，文中通过示例代码介绍的非常详细，对大家的理解和学习具有一定的参考学习价值，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
Vue3中this的替代方案
MoXinXueWEB的博客
11-23 1500
小菜鸟在学习
vue使用axios后，识别不到this中的变量
qq_56239000的博客
11-27 357
vue，axios
学习笔记（2） - 发送异步请求axios then()中的this
烟溪彭于晏的博客
04-19 3988
ssm整合，使用vue和axios把数据库中的数据展现到表单中的时候，发现查询后的数据可以输出在控制台（说明是拿到了数据），但是不展现在表单中，就很让我纳闷，困扰了我一个多小时，最后在黑马视频中找到了原因。 在axios.get().then()中的this是指的window，但是要把数据展现在表单需要的是Vue，要拿到Vue对象中的tableData并把它赋值。 所以解决办法是在axios外面 :var this_vue=this 问题解决。 getAll(){ ...
Vue，使用axios中this为undefined解决，this指向
热门推荐
前端小狮的博客
08-10 1万+
在vue较多使用的是axios请求，请求后的回调函数中，this不能指向当前vue实例，打印出来是undefined; 1，let that = this，以前常用的存储this的方法 getSerTime:function(){ let that = this ;//存储this Vue.axios.get(root + '/api/findInfoDetail'...
vue使用axios后，访问不到this中的变量
archer的技术故事
03-21 1万+
本文主要针对vue中使用axios进行与后台交互后，从后台拿到数据绑定到前台的时候发现绑定不上的问题进行处理。下面是出现问题的代码：testget: function () { this.$ajax({ method: 'get', url: 'zk/connect?connectionString=' + this.connec...
Vue axios中this的指向问题
qq_30378229的博客
11-02 1万+
在Vue中this始终指向Vue，但axios中this为undefined，例如若需要赋值给变量用以渲染数据，可以通过=>函数，这时this为Vue
axios的this指向_vue使用axios时关于this的指向问题详解
weixin_39772420的博客
12-20 1126
前言众所周知axios是vue-resource后出现的vue请求数据的插件。vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios。更多的详细介绍大家可以参考这里：本文主要介绍了关于vue使用axios时this的指向问题，下面话不多说了，来一起看看详细的介绍吧。1.解决办法在vue中使用axios做网络请求的时候，会遇到this不指向vue，而为unde...
Vue笔记
最新发布
03-22
### 关于 Vue 的学习笔记与教程 以下是综合整理的关于 Vue 及其生态系统的相关内容，涵盖了基础概念、常用功能以及实际开发中的技巧。 #### 1. Vue Router 使用指南 Vue Router 是 Vue 官方支持的一个路由管理库，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值