ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

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

2022-07-12 10:33:37  阅读：157  来源： 互联网

标签：function axios springboot res 43 9999 music data


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响应对象：

 

 

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.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>

 

 

 

 

只取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>

 

 

 

只取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>

 

 

 

 

 只取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>

 

 

 

标签：function,axios,springboot,res,43,9999,music,data
来源： https://www.cnblogs.com/lysboke/p/16469102.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有