当前位置: 首页 > 面试题库 >

如何在AngularJS中正确使用HTTP.GET?具体来说,是否需要外部API调用?

仰钧
2023-03-14
问题内容

我在controller.js中有以下代码,

var myApp = angular.module('myApp',[]);

myApp.service('dataService', function($http) {
delete $http.defaults.headers.common['X-Requested-With'];
this.getData = function() {
    $http({
        method: 'GET',
        url: 'https://www.example.com/api/v1/page',
        params: 'limit=10, sort_by=created:desc',
        headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
     }).success(function(data){
         return data
    }).error(function(){
        alert("error");
    });
 }
});

myApp.controller('AngularJSCtrl', function($scope, dataService) {
  $scope.data = dataService.getData();
});

但是,我想我可能在CORS相关问题上犯了一个错误。您能给我指出拨打电话的正确方法吗?非常感谢!


问题答案:

首先,您的success()处理程序仅返回数据,但getData()由于已在回调中,因此不会返回给调用方。
$http是一个返回的异步调用$promise,因此您必须为数据可用时注册一个回调。

我建议在AngularJS中查找Promises和$
q库
,因为它们是在服务之间传递异步调用的最佳方法。

为简单起见,这是您的相同代码,但使用调用html" target="_blank">控制器提供的函数回调函数进行了重写:

var myApp = angular.module('myApp',[]);

myApp.service('dataService', function($http) {
    delete $http.defaults.headers.common['X-Requested-With'];
    this.getData = function(callbackFunc) {
        $http({
            method: 'GET',
            url: 'https://www.example.com/api/v1/page',
            params: 'limit=10, sort_by=created:desc',
            headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
        }).success(function(data){
            // With the data succesfully returned, call our callback
            callbackFunc(data);
        }).error(function(){
            alert("error");
        });
     }
});

myApp.controller('AngularJSCtrl', function($scope, dataService) {
    $scope.data = null;
    dataService.getData(function(dataResponse) {
        $scope.data = dataResponse;
    });
});

现在,$http实际上已经返回了一个$ promise,因此可以将其重写:

var myApp = angular.module('myApp',[]);

myApp.service('dataService', function($http) {
    delete $http.defaults.headers.common['X-Requested-With'];
    this.getData = function() {
        // $http() returns a $promise that we can add handlers with .then()
        return $http({
            method: 'GET',
            url: 'https://www.example.com/api/v1/page',
            params: 'limit=10, sort_by=created:desc',
            headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
         });
     }
});

myApp.controller('AngularJSCtrl', function($scope, dataService) {
    $scope.data = null;
    dataService.getData().then(function(dataResponse) {
        $scope.data = dataResponse;
    });
});

最后,还有更好的方法来配置$http服务以处理用于config()设置的标头$httpProvider。请查看$
http文档
以获取示例。



 类似资料:
  • 问题内容: 我在这里读到,系统调用用于在Linux中创建线程。现在,语法的是这样的,就需要启动程序/函数地址传递给它。 但是在此页面上,此内容是内部调用的。所以我的问题是,由子程序创建的子进程如何开始运行调用后的代码部分,即它如何不需要以函数为起点? 如果我提供的链接信息不正确,请引导我找到一些更好的链接/资源。 谢谢 问题答案: 对于此类问题,请始终阅读源代码。 从glibc (GitHub)(

  • 问题内容: 如果我正确使用通道,是否需要使用互斥锁来防止并发访问? 问题答案: 如果正确使用通道,则不需要互斥。在某些情况下,使用互斥锁的解决方案可能会更简单。 只需确保包含通道值的变量已正确初始化,然后使用多个goroutine尝试访问通道变量即可。一旦完成,按设计访问通道(例如,向它们发送值或从中接收值)是安全的。 带有参考文献的证明文件(重点由我添加): 规格:渠道类型: 单个信道 ,可以使

  • 我将firebase添加到我的android项目中,以使用firebase云消息传递。我按照文档进行了操作,但没有找到调用的任何说明。 我的应用程序工作很好,除了有一次它崩溃了以下错误。 当我搜索错误时,给出的解决方案是在启动时调用。 我想知道这是否真的有必要,因为文档没有提到它,我的应用程序在没有它的情况下工作(大部分)很好。 有人知道调用是否真的有必要,还有什么可能导致我上面提到的错误吗? 下

  • 问题内容: 我正在尝试在我的角度应用程序中编写一个小型服务,这将使我能够选择在全局Javascript对象中指定的配置参数。除非文档准备好,否则我不想尝试访问全局配置对象(因为我不能保证脚本元素在HTML中的插入顺序)。 但是,我不明白为什么我需要调用才能使分辨率实际传播到回调。 问题答案: 在AngularJS中,resolve()的结果在$digest周期内异步传播,而不是立即传播。这意味着仅

  • 我正在尝试将 react 应用程序部署到服务器。 当我部署的应用程序尝试调用同一服务器上的api时,它会收到以下错误: 包 .json 文件指定了代理: 下面是我的api调用: 更让我感到困惑的是,当我从远程服务器提供站点,从我自己的本地计算机访问它,并在本地计算机上提供后端时,该站点正在调用我自己的本地端口(成功,一旦我注意到发生了什么并将cors配置源更改为远程服务器的IP进行测试), 并访问

  • 我正在尝试使用NodeJS(使用Express)向外部API发出httpget请求,但没有得到任何数据。我的代码是nextone: 但我得到的回应是:状态码:302,身体是空的。 外部API工作正常(我尝试过使用http GET请求并返回数据) 我正在执行的请求需要授权令牌 我做错了什么?或者我能做些什么来找回数据? 干杯