vue + axios请求 入门与this 指向踩坑问题

效果图：

 

 参考资料：

官网:http://www.axios-js.com/zh-cn/docs/

入门 踩坑注意：

在Vue中this始终指向Vue，但axios中this为undefined，例如

这里写图片描述

原因：

在请求执行成功后执行回调函数中的内容，回调函数处于其它函数的内部this不会与任何对象绑定，为undefined。

若需要赋值给变量用以渲染数据，可以通过=>函数，这时this为Vue

这里写图片描述

有时候采用 =>箭头函数还是指向不到this,就需要通过that 来指向；
let that = this 
将this保存在that中，再在函数中使用that即可 

只要要用到vue 的组件就用箭头函数=>写法

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>vue + axios请求</title>
    </head>

    <body>

        <div id="test">
            <span v-text="num"></span>
            <p>页面加载于{{time}}</p>
        </div>
        
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script type="text/javascript">
            
            var app = new Vue({
            el: '#test',
            data: {
                num:'1',
                time:new Date()
            },
            created: function() {
                this.getData();
            },
            methods: {
                getData(){
                    axios.get('http://api.whlyw.net/bo/api/v1/big-data-ticket-market/list/res/sales', {
                        headers: {
                            XverifyApi: 'mJ7f2MObwSv2Zz7LckdgfaTipcxF0kiRLOkwnSHv2us1x',
                            XownerId:'fqszs',
                            XsysId: 'sys-0'
                        }, 
                        params: {
                        }
                    })
                    .then((response) =>{
                        console.log(response);
                        //vue + axios请求这里是html页面引入vue方式可以直接通过this指向组件
                        this.num = response.data.data.salesNum;
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
                }
            }
            })
            
        </script>
    </body>

</html>

 

以上图片转载于：https://blog.csdn.net/qq_30378229/article/details/78429374?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

 

posted @ 2020-12-11 17:35  逸凨  阅读(453)  评论(0)  编辑  收藏  举报