AngularJS：如何使用 AngularJS 调用 RESTful API？-JavaScript中文网-JavaScript教程资源分享门户

AngularJS 是一个非常流行的前端框架，它提供了许多方便的功能和工具来简化前端开发。其中一个非常常见的任务是从前端调用 RESTful API。在本文中，我们将讨论如何在 AngularJS 中使用 $http 服务调用 RESTful API 以及一些最佳实践。

准备工作

在开始调用 RESTful API 之前，我们需要确保我们的项目中已经包含了 AngularJS 和 ngRoute （可选）模块。你可以使用 AngularJS 官方提供的 CDN 或者把文件下载到本地。

<!--官网CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>

<!--本地文件-->
<script src="/path/to/angular.js"></script>
<script src="/path/to/angular-route.js"></script>

另外，如果你的 RESTful API 需要身份验证或者授权，你需要确保你的 API 服务器已经配置好了，并且你已经拥有了正确的 API Key 和 Token 等认证信息。

使用 $http 服务调用 RESTful API

在 AngularJS 中调用 RESTful API 最常见的方法就是使用 $http 服务。与 jQuery 中的 $.ajax() 类似，$http 提供了一些参数来发送 HTTP 请求，如方法、URL、头部、数据等。一个简单的调用 RESTful API 的示例代码如下：

// javascriptcn.com 代码示例
// 使用 $http 服务发送 GET 请求
$http({
  method: 'GET',
  url: '/api/user',
}).then(function successCallback(response) {
  // 请求成功的回调函数
  console.log(response.data);
}, function errorCallback(response) {
  // 请求失败的回调函数
  console.log(response.statusText);
});

这里，我们使用了 $http 服务来向 /api/user 发送了一个 GET 请求。在请求成功后，$http 返回的是一个 promise，我们可以通过传递两个回调函数来处理请求成功和请求失败的情况。

在上面的示例代码中，如果请求成功，我们将会在控制台打印出返回的数据。如果请求失败，我们将会打印出错误的状态信息。

最佳实践

在调用 RESTful API 时，有一些最佳实践可以帮助你写出更好的代码。以下是一些需要注意的点：

对请求的错误进行处理

在上面的示例代码中，我们只是简单地将错误打印出来了，这并不是一个好的实践方式。正确的做法是，将错误信息集中处理并组织，给用户一个友好的错误提示。

// javascriptcn.com 代码示例
$http({
  method: 'GET',
  url: '/api/user',
}).then(function successCallback(response) {
  // 请求成功的回调函数
  console.log(response.data);
}, function errorCallback(response) {
  // 请求失败的回调函数
  showError(response);
});

function showError(response) {
  // 根据错误状态码显示友好的错误提示
  switch (response.status) {
    case 400:
      alert('Bad Request');
      break;
    case 401:
      alert('Unauthorized');
      break;
    case 403:
      alert('Forbidden');
      break;
    case 404:
      alert('Not Found');
      break;
    default:
      alert('Unknown Error');
  }
}

处理 RESTful API 的响应

在发送 RESTful API 请求后，服务器将会返回一些响应数据。这些数据有可能是 JSON 格式或者 XML 格式等各种类型。在 AngularJS 中，我们可以通过指定 responseType 参数来告诉 $http 如何处理响应数据。下面是一些可能的取值：

responseType = 'json'：返回 JSON 数据类型；
responseType = 'text'：返回纯文本数据类型；
responseType = 'document'：返回 HTML 文档数据类型；
responseType = 'arraybuffer'：返回 ArrayBuffer 类型。

示例代码如下：

// javascriptcn.com 代码示例
// 设置 responseType 来处理返回格式
$http({
  method: 'GET',
  url: '/api/user',
  responseType: 'json'
}).then(function successCallback(response) {
  // 请求成功的回调函数
  console.log(response.data);
}, function errorCallback(response) {
  // 请求失败的回调函数
  console.log(response.statusText);
});

封装请求到 Service 服务中

一个更好的实践是将请求封装到 Service 服务中，这样有助于组织代码和保持代码的干净整洁。示例代码如下：

// javascriptcn.com 代码示例
// User Service
app.factory('UserService', function($http) {
  var service = {};

  service.getAll = function() {
    return $http({
      method: 'GET',
      url: '/api/user',
      responseType: 'json'
    });
  };

  service.getById = function(id) {
    return $http({
      method: 'GET',
      url: '/api/user/' + id,
      responseType: 'json'
    });
  };

  return service;
});

// Controller
app.controller('UserController', function($scope, UserService) {
  UserService.getAll().then(function(response) {
    // 处理返回的用户列表数据
    $scope.users = response.data;
  });
});

在这个示例代码中，我们创建了一个名为 UserService 的 Service 服务，通过 getAll() 和 getById() 方法来封装对 RESTful API 的请求。在 Controller 中，我们通过调用 UserService 获取到所有用户列表，并将其绑定到 $scope 上。

总结

在本文中，我们详细讨论了如何在 AngularJS 中通过 $http 服务调用 RESTful API，以及一些最佳实践。虽然这些示例代码看起来很简单，但它们展示了一些非常实用的技巧，有助于你写出更清晰、更高效、更健壮的代码。了解这些技巧是成为一名优秀的前端工程师的必要条件之一。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653fac717d4982a6eb93b418