AngularJS如何优雅调用API并处理跨域与异步数据？

在AngularJS开发中，调用API是与后端服务交互的核心环节，通过合理的设计和实现，可以确保数据交互的高效性与安全性，本文将系统介绍AngularJS调用API的常见方法、关键步骤及最佳实践。

依赖注入与HTTP服务

AngularJS通过依赖注入（DI）机制管理服务，其中$http服务是实现API调用的核心工具，使用前需确保已将ng模块注入应用，并通过$http发起HTTP请求。

app.controller('UserController', function($http, $scope) {  
    $http.get('/api/users')  
        .then(function(response) {  
            $scope.users = response.data;  
        })  
        .catch(function(error) {  
            console.error('请求失败:', error);  
        });  
});  

上述代码通过$http.get()发起GET请求，使用then()处理成功响应，catch()捕获错误。

请求方法与参数传递

$http支持多种HTTP方法，如GET、POST、PUT、DELETE等，不同场景需选择合适的方法，并正确传递参数：

对于复杂参数，可通过params对象配置：

$http.get('/api/users', {  
    params: {  
        page: 1,  
        limit: 10  
    }  
});  

响应处理与数据转换

API响应通常为JSON格式，AngularJS会自动解析响应数据，但需注意：

1. 响应结构：response.data包含实际数据，response.status为HTTP状态码。
2. 错误处理：通过.catch()或$http的error回调统一处理异常，如网络错误或4xx/5xx状态码。
3. 数据转换：若后端返回非JSON数据，可通过transformResponse自定义解析逻辑：

   $http.get('/api/data', {  
    transformResponse: function(data) {  
        return JSON.parse(data.replace('callback(', ''));  
    }  
   });  

拦截器与全局配置

为避免重复代码，可通过拦截器（Interceptor）统一处理请求/响应：

app.config(function($httpProvider) {  
    $httpProvider.interceptors.push(function($q, $localStorage) {  
        return {  
            request: function(config) {  
                // 添加Token  
                if ($localStorage.token) {  
                    config.headers.Authorization = 'Bearer ' + $localStorage.token;  
                }  
                return config;  
            },  
            responseError: function(rejection) {  
                // 统一错误处理  
                if (rejection.status === 401) {  
                    // 跳转登录页  
                }  
                return $q.reject(rejection);  
            }  
        };  
    });  
});  

与$scope和生命周期结合

在控制器中调用API时，需注意：

1. 异步操作：API调用是异步的，避免直接在$scope上赋值后立即使用数据。
2. 销毁处理：在控制器中通过$scope.$on('$destroy')取消未完成的请求，避免内存泄漏：

   var canceler = $q.defer();  
   $http.get('/api/data', {timeout: canceler.promise});  
   $scope.$on('$destroy', function() {  
    canceler.resolve();  
   });  

最佳实践

1. 模块化设计：将API调用逻辑封装为独立服务（Service），提高代码复用性。
2. 安全性：敏感操作使用HTTPS，Token通过安全方式存储（如$httpProvider的withCredentials）。
3. 性能优化：对频繁请求的数据使用缓存机制，减少网络开销。

通过以上方法，可构建健壮的API交互层，确保AngularJS应用与后端服务的高效协作，实际开发中需结合项目需求灵活调整,兼顾功能实现与代码可维护性。