在angularJs中返回请求响应

Posted 2023-03-07

【中文标题】在angularJs中返回请求响应

【英文标题】：Return request response in angularJs

【发布时间】：2017-10-10 15:29:04

【问题描述】：

我已经设置了一个控制器和服务来从我自己的 NodeJS API/MongoDB 端点获取一些 JSON。

在我的浏览器控制台中，我看到一个返回的对象和 5 个项目，当我查询我的 api 时，我在浏览器中看到相同的 json，所以我知道它在服务器端工作。

我很困惑，为什么在尝试通过此操作进行 NG-Repeat 时，我在页面上什么也没有得到，而当我通过控制台注销返回的数据时，它又返回未定义。

我是 HTTP 模块的新手，我正在尝试重构对服务的数据库调用，而不是在控制器中使用它。

--- 控制器代码---

vm.getDepartments = function() 
        vm.departments = DbService.getAllDepartments();
        console.log(vm.departments);

    ();

--- 服务代码（使用 $http）---

function getAllDepartments() 
        $http.get('/api/departments').then(function(err, response) 
            if (err) 
                console.log(err);
            
            return response;

        );
    ;

--- html页面---

<tbody>
                    <tr ng-repeat='dept in vm.departments'>
                        <td> dept.departmentLong </td>
                        <td> dept.departmentShort </td>
                        <td>
                            <button class='btn btn-warning'><span class='glyphicon glyphicon-edit'></span></button>
                            <button class='btn btn-danger' ng-click='vm.deleteDepartment(dept);'><span class='glyphicon glyphicon-ban-circle'></span></button>
                        </td>
                    </tr>
                </tbody>

【参考方案1】：

你使用了错误的then方法。

then() 方法接受两个参数：success 和 error 回调，将使用 response 对象调用。

使用then() 方法，将callback 函数附加到返回的promise。

查看mine. 发布的旧答案

$http.get('/api/departments') 返回一个promise，因此您可以创建一个只返回promise 的函数，正如@sachila ranawaka 所述。

function getAllDepartments() 
   return $http.get('/api/departments')
;

在控制器中使用我上面提到的then方法。

 DbService.getAllDepartments().then(function(response) 
      vm.departments = response.data; 
      console.log(vm.departments);
 ,function(error)
      console.log(err);
 );

另一种方法是创建一个callback函数，并将其传递给getAllDepartments方法。

function getAllDepartments(callback) 
    $http.get('/api/departments').then(function(response) 
        callback(response);
    );
;

控制器代码：

vm.getDepartments = function() 
    vm.departments = DbService.getAllDepartments(function(result)
        console.log(result);
    );
();

【讨论】：

还值得一提的是，为了处理 promise 拒绝（由错误引起），您可以在 $http.get('/api/departments') 上调用 .catch() 方法.

谢谢亚历克斯。你的解释很有帮助。它现在正在工作，我想我更了解服务的责任。承诺对我来说是一个挑战，实践会帮助我思考。

【参考方案2】：

在服务中只返回http请求

function getAllDepartments() 
       return $http.get('/api/departments')
 ;

并在控制器中捕获承诺。使用response.data获取数据

vm.getDepartments = function() 
      DbService.getAllDepartments().then(function(response) 

            vm.departments = response.data; 
            console.log(vm.departments);
        );