Vue 解惑之关于axios 回调函数中 this 的指向

最新推荐文章于 2023-12-09 16:04:59 发布

Lhy@@

最新推荐文章于 2023-12-09 16:04:59 发布

阅读量891

点赞数 2

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/Lhy_JL/article/details/117353220

版权

Vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

可以先运行下完整代码看看结果。

一、主要内容

SendGet 函数中的两个this打印情况
如果 this 不相等，找找原因？

二、打印结果

打印结果

两个this 是不一样的，out this 指向的是Vue 实例；
inner this 指向的是window；

三、结果分析

其实两个this指向不一样是因为调用它们所在函数的对象不一样，out this所在的函数SendGet 是被Vue 实施调用，
inner this 所在的回调函数时是在执行栈中被执行，this指向就是window了

四、修改 this 的指向方法

这个修改哪个this?修改的是inner this，保持跟out this 指向一致，这样我们请求返回的数据就赋&给Vue实例中的 data 对象，这样页面呈现的就是最新数据。

方法一，将回调函数形式改为箭头函数，（详解参考箭头函数中this的指向）

   SendGet:function(){
        console.log("out this:",this)
        axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5')
        .then(res=>{
          console.log("inner this:",this)
          // console.log(res.data);
        });
      },

方法二，变量传值

 SendGet:function(){
        console.log("out this:",this)
        var _this = this;
        axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5')
        .then(function(res){
          console.log("inner this:",_this)
          // console.log(res.data);
        });
      },

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>认识Vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

 <div id="app">
   {{message}}
   <button @click='OnClick'>点击</button>
   <button @click='SendGet'>Get请求</button>

 </div>
 
 <script>
   new Vue({
     el:'#app',
     data:{
       message: 'Hello, Vue!',
     },
     methods:{
       OnClick:function(){
         console.log('this:',this);
         console.log('click');
       },
       SendGet:function(){
         console.log("out this:",this)
         axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5')
         .then(function(res){
           console.log("inner this:",this)
           // console.log(res.data);
         });
       },
     }
   });
 </script>
</body>
</html>

Lhy@@

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
Vue 解惑之关于axios 回调函数中 this 的指向

一、主要内容SendGet 函数中的两个this打印情况如果 this 不想等，找找原因？二、打印结果两个this 是不一样的，out this 指向的是Vue 实例；inner this 指向的是window；三、结果分析其实两个this指向不一样是因为调用它们所在函数的对象不一样，out this所在的函数SendGet 是被Vue 实施调用，inner this 所在的回调函数时是在执行栈中被执行，this指向就是window了四、修改 this 的指向方法这个修改
复制链接

扫一扫