Angular $http returns $$state ob

问题描述：

获取不到$http请求成功后返回的数据

产生错误的代码分析：

//根据书籍大类的id值从数据库中获得书籍信息
        var getBookInfo=function (cateId){
            postData='book.category.categoryId='+cateId;
            return   $http({
                        method:'POST',
                        url:'book-getBooksByCategory.action',
                        data:postData,//已序列化用户输入的数据
                        headers:{'Content-Type': 'application/x-www-form-urlencoded' } //当POST请求时，必须添加的
                     }).then(function(response){
                        console.log(response); //打印响应数据（采用then方法获得的响应数据比用success方法获得的响应数据信息多）
                        return response.data;//将响应数据的data属性值返回
                     });
        }        

//高亮显示当前商家查看的书籍大类并从数据库中查书籍信息
        $('.book-big-categorys a').click(function(){
            var categoryId=$(this).attr('data-id');
            var bookInfo,
                reData;
            $('.book-big-categorys a').css('color','#656565');
            $(this).css('color','#ddbea1');//高亮显示当前点击的书籍大类名称
            reData=getBookInfo(categoryId); //调用getBookInfo()函数，期望得到响应数据
            console.log(reData); //打印出来是promise对象（不是期望得到的）
            bookInfo=reData.value; //根本就获取不到值
            console.log(bookInfo); //undefined
        });

上述代码的运行结果：（上述三个console.log的结果，由上到下）

图片.png

很明显期望得到的值为undefined（不是我们想要的）

解决办法：

将调用getBookInfo的方法改一下

原因分析：采用$http的then方法后，虽然可以得到其返回值，但是返回值为promise对象，这是通过异步请求得到的，所以普通的函数调用方法得不到其返回值，只有对promise对象再用then方法才可以得到，下述代码时改动后的代码（只改动了函数调用部分）

 //高亮显示当前商家查看的书籍大类并从数据库中查书籍信息
        $('.book-big-categorys a').click(function(){
            var categoryId=$(this).attr('data-id');
            var bookInfo,
                reData;
            $('.book-big-categorys a').css('color','#656565');
            $(this).css('color','#ddbea1');//高亮显示当前点击的书籍大类名称
            getBookInfo(categoryId).then(function(myData){
                console.log(myData.books[0]);
                console.log('我执行了');
            });
        });

对上述代码进行截屏分析：

图片.png

扩展：

$http的success()方法其实就是和then()方法差不多，只是在方法内部调用了then()方法，并且解构了 then 方法传递给回调方法的参数，也就是说使用success()方法得到的 response 比then()精简，少一些数据，这算是Angular中的一个语法糖。

注意，还有一个重要的区别，就是使用success()方法无法使外部获取到最后回调函数中返回的数据：

图片.png

　　上面的数据是无法打印出来，因为数据并没有直接返回出来，这是success()内部实现机制造成的，如果想要打印出返回的数据这时就要使用then()方法。

为了避免造成不可遇见bug，还是建议在项目中都使用then()方法，保持整个项目代码风格的一致性。

感谢：

AngularJS中$http.success()与$http.then()方法
Angular http returns $$state object