AngularJS 作为一款经典的前端框架，凭借其双向数据绑定、依赖注入等特性，在 Web 开发领域曾占据重要地位，与后端接口进行数据交互是前端开发的核心环节，本文将详细介绍 AngularJS 调用接口的相关知识，包括核心服务、常用方法、参数传递、错误处理及最佳实践等内容。
核心服务：$http 与 $resource
AngularJS 提供了内置的 $http 服务和 $resource 服务用于与后端 API 进行通信，两者各有侧重，适用于不同的场景。
$http 服务
$http 是 AngularJS 最核心的 HTTP 请求服务，基于浏览器的 XMLHttpRequest 或 JSONP 实现，支持 GET、POST、PUT、DELETE、HEAD 等多种 HTTP 方法，其基本使用语法为：
$http(config).then(successCallback, errorCallback);
config 是一个配置对象，可包含 url（请求地址）、method（请求方法）、params（GET 请求参数）、data（POST/PUT 请求体数据）、headers（请求头）等属性，successCallback 和 errorCallback 分别是请求成功和失败时的回调函数，返回 Promise 对象，支持链式调用。
$resource 服务
$resource 是 AngularJS 官方提供的 ngResource 模块中的服务，专门用于 RESTful 风格的接口调用，它基于 $http 封装，提供了更简洁的 API，适合标准的 CRUD（增删改查）操作，使用前需引入
angular-resource.js
文件：
var app = angular.module('myApp', ['ngResource']);var User = $resource('/api/users/:id', { id: '@id' });// 获取用户列表User.query(function(users) {$scope.users = users;});// 获取单个用户User.get({ id: 1 }, function(user) {$scope.user = user;});// 创建用户User.save({}, { name: 'John', age: 25 }, function(newUser) {console.log('User created:', newUser);});
$resource 的第一个参数是资源 URL 模板，第二个参数是默认参数，第三个参数可自定义扩展方法。
接口调用方法详解
GET 请求：获取数据
GET 请求用于从服务器获取资源，参数通常通过 URL 查询字符串传递。
$http.get('/api/users', {params: { page: 1, limit: 10 },headers: { 'Authorization': 'Bearer token' }}).then(function(response) {$scope.users = response.data;}, function(error) {console.error('Error fetching users:', error);});
POST 请求：提交数据
POST 请求用于向服务器提交资源，数据通常放在请求体中。
$http.post('/api/users', {name: 'Alice',email: 'alice@example.com'}).then(function(response) {$scope.newUser = response.data;}, function(error) {console.error('Error creating user:', error);});
PUT/PATCH 请求：更新数据
PUT 通常用于完整更新资源，PATCH 用于部分更新，数据同样放在请求体中。
// PUT 请求$http.put('/api/users/1', {name: 'Alice Smith',email: 'alice.smith@example.com'}).then(function(response) {$scope.updatedUser = response.data;});// PATCH 请求$http.patch('/api/users/1', { email: 'new.email@example.com' });
DELETE 请求：删除数据
DELETE 请求用于删除服务器上的资源，通常需指定资源 ID。
$http.delete('/api/users/1').then(function(response) {console.log('User deleted successfully');});
参数传递与响应处理
参数传递方式
响应数据结构
$http 的响应对象包含多个属性：
通过
response.data
可直接获取业务数据，
response.status
用于判断请求状态。
错误处理与拦截器
全局错误处理
使用 $http 的方法或第二个回调函数可捕获请求错误：
$http.get('/api/data').catch(function(error) {if (error.status === 404) {console.error('Resource not found');} else if (error.status === 500) {console.error('Server error');}return $q.reject(error); // 继续传递错误});
拦截器（Interceptor）
拦截器是 $http 的强大功能，可在请求发送前、响应返回后进行统一处理，如添加 token、统一错误处理、日志记录等，拦截器需实现、
requestError
、、
responseError
四个方法：
app.config(function($httpProvider) {$httpProvider.interceptors.push('authInterceptor');});app.factory('authInterceptor', function($q, $localStorage) {return {request: function(config) {if ($localStorage.token) {config.headers.Authorization = 'Bearer ' + $localStorage.token;}return config;},responseError: function(rejection) {if (rejection.status === 401) {// 处理未授权逻辑}return $q.reject(rejection);}};});
常见问题与最佳实践
跨域问题
后端需配置 CORS（跨域资源共享），在响应头中添加：
Access-Control-Allow-Origin: *Access-Control-Allow-Methods: GET, POST, PUT, DELETEAccess-Control-Allow-Headers: Content-Type, Authorization数据格式约定
前后端应统一数据格式,如 RESTful 接口返回 JSON 数据，包含、、等字段，便于前端统一处理。
缓存控制
GET 请求默认会被浏览器缓存，可通过
cache: false
禁用缓存，或添加时间戳参数防止缓存：
$http.get('/api/data', { cache: false });
安全性
性能优化
AngularJS 的接口调用能力是构建动态 Web 应用的基础，通过 $http 和 $resource 服务，开发者可以灵活地与后端进行数据交互，在实际开发中，需根据业务场景选择合适的服务，注重错误处理、安全性和性能优化，并结合拦截器实现统一的请求管理，掌握这些核心知识点，能够帮助开发者更高效地完成 AngularJS 项目的接口对接工作，确保应用的稳定性和可维护性。
发表评论