angularjs调接口时如何解决跨域和请求参数传递问题？

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');
});

参数传递与响应处理

参数传递方式

查询参数：GET 请求的参数通过 params 属性传递，或直接拼接到 URL 中。
路径参数：RESTful 接口中的动态参数（如 id）需在 URL 模板中定义，通过 $resource 的第二个参数绑定。
请求体参数：POST/PUT/PATCH 请求的数据通过 data 属性传递，默认 Content-Type 为 application/json。

响应数据结构

$http 的响应对象包含多个属性：

data：服务器返回的数据主体。
status：HTTP 状态码（如 200、404、500）。
headers：响应头信息。
config：原始请求配置对象。
statusText：HTTP 状态文本（如 ‘OK’、’Not Found’）。

通过 response.data 可直接获取业务数据，response.status 用于判断请求状态。

错误处理与拦截器

全局错误处理

使用 $http 的 catch 方法或第二个回调函数可捕获请求错误：

$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、统一错误处理、日志记录等，拦截器需实现 request、requestError、response、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, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

数据格式约定

前后端应统一数据格式,如 RESTful 接口返回 JSON 数据，包含 code、message、data 等字段，便于前端统一处理。

缓存控制

GET 请求默认会被浏览器缓存，可通过 cache: false 禁用缓存，或添加时间戳参数防止缓存：

$http.get('/api/data', { cache: false });

安全性

敏感数据（如 token）应通过 HTTP 头传递，避免放在 URL 或请求体中。
对用户输入进行转义,防止 XSS 攻击。
使用 HTTPS 加密传输数据。

性能优化

避免频繁请求,可使用防抖（debounce）或节流（throttle）技术。
合理使用 $resource 的缓存机制，减少重复请求。
大数据列表可采用分页加载,降低服务器压力。

AngularJS 的接口调用能力是构建动态 Web 应用的基础，通过 $http 和 $resource 服务，开发者可以灵活地与后端进行数据交互，在实际开发中，需根据业务场景选择合适的服务，注重错误处理、安全性和性能优化，并结合拦截器实现统一的请求管理，掌握这些核心知识点，能够帮助开发者更高效地完成 AngularJS 项目的接口对接工作，确保应用的稳定性和可维护性。

图片来源于AI模型，如侵权请联系管理员。作者：酷小编，如若转载，请注明出处：https://www.kufanyun.com/ask/48934.html