AngularJS如何发送异步Get

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

核心服务：$http服务概述

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

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

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

发送异步GET请求

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

基本用法

$http.get() 方法接受一个URL字符串作为必需参数，返回一个Promise对象，我们可以通过 .success() 和方法（AngularJS 1.4.x之前）或方法（推荐，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() 和方法已被标记为废弃，推荐使用方法，并通过和参数分别处理成功和失败的情况。

带参数的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可能类似于：

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() 的配置对象类似，包括、等，特别地，可以通过配置来覆盖默认的 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);});

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

发送键值对形式的POST数据

如果需要发送传统的 application/x-www-form-urlencoded 格式的数据（类似于表单提交），可以通过设置并手动序列化数据，或使用的方法（如果项目中引入了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 是一个函数，用于在发送请求前对请求体数据进行转换。

错误处理与响应拦截

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

请求级别的错误处理

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

$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 数组，可以添加拦截器函数，该函数会返回一个包含、 requestError 、、 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); // 继续传播错误}};}]);});

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

最佳实践与注意事项

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