AngularJS http return value

AngularJS http return value

本文关键字：value return http AngularJS      更新时间：2023-09-26

我想在AngularJS中写一个返回值的函数(实际上它是一个字符串)。这个值是由http请求返回的，但是async快把我逼疯了。

我的第一次尝试是:

this.readParameter = function(key) {
  $http({
    method: "GET",
    url: "XXXXXXX",
    headers: { 'Content-Type': 'application/json' }
  }).then(function successCallback(response) {
    return response.data;
  }, function errorCallback(response) {
    throw new Error("Error");
  })
};

但是，由于Angular的异步特性，它当然不能工作。数据未定义)

怎么做?我只是想返回值(字符串)，所以我可以像

这样使用这个函数
var a = readParameter("key1")

你可以在函数外定义一些初始值的变量，在成功函数内定义一个响应集值，而不是返回它。

委派模式在这里可以很好地将$http任务分配给一些服务，并使用回调方法进行响应。

Controller (Call Service for specific request) -> Service (Manage request params and other things and return factory response to Controller) -> Factory (Send request and return to Service)

Callback的基本示例

var myVariable = '';
function myFunction (key, callback) {
  $http({
    method: "GET",
    url: "XXXXXXX",
    headers: { 'Content-Type': 'application/json' }
  }).then(function successCallback(response) {
      callback(response);
  }, function errorCallback(response) {
    throw new Error("Error");
  })
};
function myCallbackFunction(response) {
   myVariable = response.data; // assign value to variable
   // Do some work after getting response
}
myFunction('MY_KEY', myCallbackFunction);

这是设置值的基本示例，但使用了上面示例中的回调模式。

var myvariable = '';
function myFunction (key) {
  $http({
    method: "GET",
    url: "XXXXXXX",
    headers: { 'Content-Type': 'application/json' }
  }).then(function successCallback(response) {
      myvariable = response.data; // set data to myvariable
      // Do something else on success response
  }, function errorCallback(response) {
    throw new Error("Error");
  })
};
myFunction('MY_KEY');

不要尝试混合异步和同步编程。相反，使用回调来使用

readParameter("key1", callback)
例如:

    this.readParameter = function(key, callback) {
  $http({
    method: "GET",
    url: "XXXXXXX",
    headers: { 'Content-Type': 'application/json' }
  }).then(function successCallback(response) {
    callback(response)
  }, function errorCallback(response) {
    throw new Error("Error");
  })
};

我使用promise:

来解决这个问题

的例子:

在Service (invoicesAPIservice => invoicesAPIservice .js)中使用:

angular.module('app')
.service('invoicesAPIservice', function ($http) {
     this.connectToAPI= function () {
     return new Promise(function(resolve,reject){
            var options = {
                method:'GET',
                url :'',
                headers:{
                    'X-User-Agent': '....',
                    'Authorization': '....',
                }
            };
           $http(options).then(function successCallback(response) {
                    resolve(response);
                //console.log(response);
            },function errorCallback(response) {
                reject(response);
            })
     });
});

});

和在你的控制器(mainCtrl=> mainCtrl.js):

angular.module('app').controller('mainCtrl', function($scope,invoicesAPIservice) {
  $scope.connectToAPI=function () {           
      invoicesAPIservice.connectToAPI().then(function (content) {
           console.log(content.statusText);
      }.catch(function (err) {
        //console.log(err);
        alert("Server is Out");
    });
 }

});

在你的页面:index.html:

<button ng-click="connectToAPI()"></button>

:)

相关文章：