在 ionic services.js 文件中对第三方 API 进行 ajax 调用

Making ajax calls to third party APIs in ionic services.js file?

本文关键字：API 第三方 进行 ajax 调用 ionic services js 文件      更新时间：2023-09-26

今天开始使用离子，遇到了一个小颠簸。服务.js文件有注释 // Might use a resource here that returns a JSON array

我想对 API 进行 ajax 调用，但我不知道如何在该服务.js文件中解压缩自定义资源。我将从该调用中收到一个 JSON 数组，并将使用该列表。

问：如何将自定义变量声明为对第三个 pary API 进行 ajax 调用的列表？

angular.module('starter.services', [])
.factory('Chats', function() {
// Might use a resource here that returns a JSON array
 var popularURL = 'SOME_API_RUL';
 var xhttp = new XMLHttpRequest();
 xhttp.onreadystatechange = function() {
 if (xhttp.readyState == 4 && xhttp.status == 200) {
    var chats = xhttp.responseText;
  }
};
xhttp.open("GET", popularURL, true);
xhttp.send();
return {
  all: function() {
    return chats;
  },
  remove: function(chat) {
    chats.splice(chats.indexOf(chat), 1);
  },
  get: function(chatId) {
  for (var i = 0; i < chats.length; i++) {
    if (chats[i].id === parseInt(chatId)) {
      return chats[i];
    }
  }
  return null;
  }
};

聊天列表永远不会填充。如何在 ionic 服务.js文件中正确进行 ajax 调用。

谢谢！

你可以做这样的事情：

angular.module('starter.services', [])
.factory('Chats', function($http) {
  var API_URL = 'https://api.herokuapp.com';
  return {
    all: function() {
      return $http.get(API_URL + '/chats');
    }
  };
});

在控制器中：

Chats.all().then(function(chats){
  $scope.chats = chats;
})

您可以在文档中查看$http

谢谢马蒂·图奇。我将在这里发布更详细的遮阳篷。

步骤：

  1. 在 app.js 文件内的视图中声明要使用的控制器。就我而言：

    .state('tab.popular', {
  url: '/popular',
  views: {
    'tab-popular': {
      templateUrl: 'templates/tab-popular.html',
      controller: 'PopularShowsCtrl' //<---CONTROLLER NAME YOU ARE USING
    }
  }
})

  2. 在控制器.js文件中声明控制器。就我而言：

    .controller('PopularShowsCtrl', function($scope, PopularShows){
   $scope.popShows = PopularShows.all(); //<---$scope.popShows is a declaration and you don't need to declare this variable beforehand.
})

  3. 现在你需要在你的服务.js文件中声明方法PopularShow.all((。在 ionic 中，你可以使用 .factory('YOUR_METHOD_NAME'， function($http({...}( 来做到这一点。$http表示您的方法使用 http 请求。就我而言：

    .factory('PopularShows', function($http){
// Might use a resource here that returns a JSON array
  return {
    all: function() {
       return $http.get('YOUR_API_URL');
    },
    get: function(popShowId) {
    // Simple index lookup
      return popShows[popShowId];
    }
  }
});

  4. 处理 popShow 变量，该变量是 html 文件中的 JSON 列表。就我而言：

    <ion-view view-title="Popular">
 <ion-content>
  <ion-list>
   <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="popShow in popShows" type="item-text-wrap">
    <h2>{{popShow.name}}</h2>
    <p>{{popShow.popularity}}</p>
    <i class="icon ion-chevron-right icon-accessory"></i>
    <ion-option-button class="button-assertive" ng-click="remove(popShow)">
      Delete
     </ion-option-button>
    </ion-item>
  </ion-list>    
 </ion-content>
</ion-view>

    ng-repeat"popShow in popShow"将遍历列表。

结论：

如您所见，"PopularShow"是服务中的方法名称.js它是从控制器.js文件中调用的。PopularShow.all(( 进行 API 调用并将其返回给控制器。然后，控制器声明一个变量($scope.popShow(，该变量在html tab-popular中使用。

相关文章：