AngularJS如何发送异步Get/Post请求？参数怎么传？

AngularJS作为一款经典的前端JavaScript框架,其强大的数据绑定和依赖注入特性为开发者构建动态Web应用提供了便利，在Web应用开发中，与后端服务器进行数据交互是核心环节，而异步请求（尤其是GET和POST请求）是实现这一交互的关键技术，本文将详细探讨AngularJS中如何发送异步GET和POST请求，涵盖核心API、参数配置、错误处理及最佳实践。

核心服务：$http服务概述

AngularJS中,与服务器进行通信的主要依赖是$http服务，该服务基于浏览器原生XMLHttpRequest对象或JSONP技术封装，支持Promise风格的回调机制，使得异步请求的处理更加简洁。$http服务提供了多种方法来发送不同类型的HTTP请求，其中最常用的便是$http.get()和$http.post()，分别对应GET和POST请求。

在使用$http服务之前，需要确保已将其注入到控制器（Controller）、服务（Service）或其他AngularJS组件中，在控制器中注入$http服务的基本方式如下：

app.controller('MyController', function($scope, $http) {
    // 在这里可以使用$http发送请求
});

发送异步GET请求

GET请求通常用于从服务器获取数据,其参数一般通过URL查询字符串传递，AngularJS的$http.get()方法简化了这一过程。

基本用法

$http.get()方法接受一个URL字符串作为必需参数，返回一个Promise对象，我们可以通过.success()和.error()方法（AngularJS 1.4.x之前）或.then()方法（推荐，Promise标准）来处理响应。

示例代码：

$http.get('https://api.example.com/users')
    .then(function(response) {
        // 请求成功
        $scope.users = response.data;
        console.log('数据获取成功:', response.data);
    }, function(error) {
        // 请求失败
        console.error('数据获取失败:', error);
    });

在AngularJS 1.4.x及更高版本中，.success()和.error()方法已被标记为废弃，推荐使用.then()方法，并通过response和rejection参数分别处理成功和失败的情况。

带参数的GET请求

如果GET请求需要携带参数,可以将参数对象作为第二个参数传递给$http.get()方法，AngularJS会自动将参数对象序列化为查询字符串并附加到URL后面。

示例代码：

var params = {
    page: 1,
    limit: 10,
    sort: 'name'
};
$http.get('https://api.example.com/users', { params: params })
    .then(function(response) {
        $scope.users = response.data;
    });

实际发送的URL可能类似于：https://api.example.com/users?page=1&limit=10&sort=name。

GET请求配置选项

除了URL和参数,$http.get()方法还可以接受一个配置对象作为第二个参数（当不传参数对象时，配置对象可作为第二个参数），配置对象可以包含以下常用属性：

示例代码（带配置）：

var config = {
    params: { id: 123 },
    headers: { 'Authorization': 'Bearer token123' },
    timeout: 5000
};
$http.get('https://api.example.com/user', config)
    .then(function(response) {
        $scope.user = response.data;
    });

发送异步POST请求

POST请求通常用于向服务器提交数据,如表单提交、数据创建等，与GET请求不同，POST请求的数据通常放在请求体中。

基本用法

$http.post()方法接受两个必需参数：URL和要发送的数据（通常是对象或字符串），同样返回一个Promise对象。

示例代码：

var userData = {
    username: 'john_doe',
    email: 'john@example.com',
    password: 'secret'
};
$http.post('https://api.example.com/users', userData)
    .then(function(response) {
        // 请求成功，通常服务器会返回创建的资源
        $scope.newUser = response.data;
        console.log('用户创建成功:', response.data);
    }, function(error) {
        console.error('用户创建失败:', error);
    });

默认情况下,$http.post()会将发送的数据序列化为JSON格式，并设置Content-Type请求头为application/json。

POST请求配置选项

$http.post()方法也可以接受第三个参数作为配置对象，其配置项与$http.get()的配置对象类似，包括headers、timeout等，特别地，可以通过headers配置来覆盖默认的Content-Type。

示例代码（自定义Content-Type）：

var formData = new FormData();
formData.append('username', 'jane_doe');
formData.append('avatar', fileInput.files[0]);
var config = {
    headers: {
        'Content-Type': undefined // 让浏览器自动设置FormData的Content-Type
    }
};
$http.post('https://api.example.com/upload-avatar', formData, config)
    .then(function(response) {
        console.log('文件上传成功:', response.data);
    });

对于文件上传等需要使用FormData的场景，通常需要将Content-Type设置为undefined，以便浏览器自动生成正确的Content-Type（包括boundary）。

发送键值对形式的POST数据

如果需要发送传统的application/x-www-form-urlencoded格式的数据（类似于表单提交），可以通过设置headers并手动序列化数据，或使用jQuery的$.param()方法（如果项目中引入了jQuery），AngularJS本身不提供内置的序列化方法，但可以简单实现：

var formData = {
    username: 'john_doe',
    password: 'secret'
};
var config = {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj){
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        }
        return str.join("&");
    }
};
$http.post('https://api.example.com/login', formData, config)
    .then(function(response) {
        console.log('登录成功:', response.data);
    });

transformRequest是一个函数，用于在发送请求前对请求体数据进行转换。

错误处理与响应拦截

在实际应用中,网络请求可能会因为各种原因失败，如服务器错误、网络中断、参数错误等，完善的错误处理机制至关重要。

请求级别的错误处理

如前所述,可以在.then()方法的第二个回调函数中处理单个请求的错误：

$http.get('https://api.example.com/data')
    .then(function(response) {
        // 成功处理
    }, function(error) {
        // error对象包含错误信息，如status、data、headers等
        if(error.status === 404) {
            console.error('请求的资源不存在');
        } else if(error.status === 500) {
            console.error('服务器内部错误');
        } else {
            console.error('其他错误:', error);
        }
    });

全局拦截器（Interceptor）

对于多个请求共有的错误处理逻辑（如统一错误提示、token刷新等），可以使用AngularJS的全局拦截器，通过$httpProvider的interceptors数组，可以添加拦截器函数，该函数会返回一个包含request、requestError、response、responseError四个方法的对象。

示例代码（全局错误拦截器）：

app.config(function($httpProvider) {
    $httpProvider.interceptors.push(['$q', '$injector', function($q, $injector) {
        return {
            responseError: function(rejection) {
                // 统一处理响应错误
                var alertService = $injector.get('alertService');
                if(rejection.status === 401) {
                    alertService.error('未授权，请重新登录');
                    // 可能需要跳转到登录页
                } else if(rejection.status === 403) {
                    alertService.error('禁止访问');
                } else {
                    alertService.error('请求失败: ' + rejection.status);
                }
                return $q.reject(rejection); // 继续传播错误
            }
        };
    }]);
});

全局拦截器可以极大地简化错误处理逻辑,提高代码的可维护性。

最佳实践与注意事项

1. 避免内存泄漏：在控制器中，如果组件在请求完成前被销毁（如路由跳转），应取消未完成的请求，可以通过$http返回的Promise对象调用.cancel()方法（如果使用$http的取消功能）或在控制器销毁事件中处理。
2. 数据安全性：发送敏感数据（如密码、token）时，务必使用HTTPS协议，避免在URL中直接传递敏感信息，应使用POST请求的请求体。
3. 合理使用缓存：对于不常变化的数据，可以配置请求缓存以减少服务器压力，AngularJS默认会对GET请求进行缓存，但可以通过设置cache配置项来禁用或自定义缓存。
4. 遵循RESTful规范：合理使用HTTP方法，如GET（查询）、POST（创建）、PUT（更新）、DELETE（删除），使API设计更加规范和易于理解。
5. 异步代码风格：推荐使用.then()而非.success()/.error()，以符合Promise标准，便于后续升级和维护。

AngularJS的$http服务为开发者提供了强大而灵活的异步请求能力，通过$http.get()和$http.post()方法，可以轻松实现与后端服务器的数据交互，掌握参数配置、错误处理以及全局拦截器的使用，能够帮助开发者构建更加健壮和可维护的Web应用，在实际开发中，应结合项目需求，遵循最佳实践，充分发挥AngularJS在数据通信方面的优势。