投稿
  1. 极客之音首页
  2. 后端开发
  3. Android

千峰商城-springboot项目搭建-43-axios箭头函数

飞熊 • • Android • 阅读 86

追求适度，才能走向成功；人在顶峰，迈步就是下坡；身在低谷，抬足既是登高；弦，绷得太紧会断；人，思虑过度会疯；水至清无鱼，人至真无友，山至高无树；适度，不是中庸，而是一种明智的生活态度。

导读：本篇文章讲解 千峰商城-springboot项目搭建-43-axios箭头函数，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

axios回调函数的参数res：
回调函数的res并不是接口返回的数据，而是表示一个响应对象。res.data才表示接口响应的数据。 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/axios.min.js" ></script>
        
    </head>
    <body>
        <div id="container">
            <button type="button" @click="test1">测试1</button>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                methods:{
                    test1:function(){
                        axios.get('http://localhost:9999/music/detail?id=25640392').then(function(res){
                            //回调函数的res并不是接口返回的数据，而是表示一个响应对象。res.data才表示接口响应的数据。
                            console.log(res);
                        });                
//                        axios.all([listMusics(),getMusicDetail()])
//                        .then(axios.spread(function (acct, perms) {
//                        // 两个请求现在都执行完成
//                        console.log(res1);
//                        console.log(res2);
//                      }));
                        
                    }
                }
            });
            function listMusics() {
              return axios.get('http://localhost:9999/music/search?s=成都');
            }
            
            function getMusicDetail() {
              return axios.get('http://localhost:9999/music/detail?id=25640392');
            }
        </script>
    </body>
</html>

res响应对象：
千峰商城-springboot项目搭建-43-axios箭头函数

res.data才表示接口响应的数据。

千峰商城-springboot项目搭建-43-axios箭头函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/axios.min.js" ></script>
        
    </head>
    <body>
        <div id="container">
            <button type="button" @click="test1">测试1</button>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                methods:{
                    test1:function(){
                        axios.get('http://localhost:9999/music/detail?id=25640392').then(function(res){
                            //回调函数的res并不是接口返回的数据，而是表示一个响应对象。res.data才表示接口响应的数据。
                            console.log(res.data);
                        });                
//                        axios.all([listMusics(),getMusicDetail()])
//                        .then(axios.spread(function (acct, perms) {
//                        // 两个请求现在都执行完成
//                        console.log(res1);
//                        console.log(res2);
//                      }));
                        
                    }
                }
            });
            function listMusics() {
              return axios.get('http://localhost:9999/music/search?s=成都');
            }
            
            function getMusicDetail() {
              return axios.get('http://localhost:9999/music/detail?id=25640392');
            }
        </script>
    </body>
</html>

千峰商城-springboot项目搭建-43-axios箭头函数

只取song.name的方法一(普通方法)：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/axios.min.js" ></script>
        
    </head>
    <body>
        <div id="container">
            <table>
                <tr>
                    <td>{{song.name}}</td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
            
            <button type="button" @click="test1">测试1</button>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    song:{
                        
                    }
                },
                methods:{
                    test1:function(){
                        axios.get('http://localhost:9999/music/detail?id=25640392').then(function(res){
                            //回调函数的res并不是接口返回的数据，而是表示一个响应对象。res.data才表示接口响应的数据。
                            if(res.data.code == 200){
                                vm.song = res.data.songs[0];
                            }
                        });                
//                        axios.all([listMusics(),getMusicDetail()])
//                        .then(axios.spread(function (acct, perms) {
//                        // 两个请求现在都执行完成
//                        console.log(res1);
//                        console.log(res2);
//                      }));
                        
                    }
                }
            });
            function listMusics() {
              return axios.get('http://localhost:9999/music/search?s=成都');
            }
            
            function getMusicDetail() {
              return axios.get('http://localhost:9999/music/detail?id=25640392');
            }
        </script>
    </body>
</html>

千峰商城-springboot项目搭建-43-axios箭头函数

只取song.name的方法二(_this)：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/axios.min.js" ></script>
        
    </head>
    <body>
        <div id="container">
            <table>
                <tr>
                    <td>{{song.name}}</td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
            
            <button type="button" @click="test1">测试1</button>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    song:{
                        
                    }
                },
                methods:{
                    test1:function(){
                        var _this = this;
                        
                        axios.get('http://localhost:9999/music/detail?id=25640392').then(function(res){
                            //回调函数的res并不是接口返回的数据，而是表示一个响应对象。res.data才表示接口响应的数据。
                            if(res.data.code == 200){
                                _this.song = res.data.songs[0];
                            }
                        });                
//                        axios.all([listMusics(),getMusicDetail()])
//                        .then(axios.spread(function (acct, perms) {
//                        // 两个请求现在都执行完成
//                        console.log(res1);
//                        console.log(res2);
//                      }));
                        
                    }
                }
            });
            function listMusics() {
              return axios.get('http://localhost:9999/music/search?s=成都');
            }
            
            function getMusicDetail() {
              return axios.get('http://localhost:9999/music/detail?id=25640392');
            }
        </script>
    </body>
</html>

 千峰商城-springboot项目搭建-43-axios箭头函数

 只取song.name的方法三(箭头函数)：

  

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/axios.min.js" ></script>
        
    </head>
    <body>
        <div id="container">
            <table>
                <tr>
                    <td>{{song.name}}</td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
            
            <button type="button" @click="test1">测试1</button>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    song:{
                        
                    }
                },
                methods:{
                    test1:function(){
                        //var _this = this;
                        
                        axios.get('http://localhost:9999/music/detail?id=25640392').then( (res)=>{
                            //回调函数的res并不是接口返回的数据，而是表示一个响应对象。res.data才表示接口响应的数据。
                            if(res.data.code == 200){
                                this.song = res.data.songs[0];
                            }
                        });                
//                        axios.all([listMusics(),getMusicDetail()])
//                        .then(axios.spread(function (acct, perms) {
//                        // 两个请求现在都执行完成
//                        console.log(res1);
//                        console.log(res2);
//                      }));
                        
                    }
                }
            });
            function listMusics() {
              return axios.get('http://localhost:9999/music/search?s=成都');
            }
            
            function getMusicDetail() {
              return axios.get('http://localhost:9999/music/detail?id=25640392');
            }
        </script>
    </body>
</html>

 千峰商城-springboot项目搭建-43-axios箭头函数

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

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/128132.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！