Angular 中如何使用 $http 发送 Ajax 请求
在前端开发中，Ajax 是非常常用的技术。而在 Angular 中，$http 服务是封装了 Ajax 功能的核心服务之一。本文将会介绍如何在 Angular 中使用 $http 服务来发送 Ajax 请求。
一、$http 服务的基本使用
- 发送一个 GET 请求
在 Angular 中使用 $http 发送一个 GET 请求很简单。下面是一个示例代码：
$http.get('/api/data').then(function (response) {
console.log(response.data);
});这个代码使用 $http.get 方法向 '/api/data' 地址发送一个 GET 请求，并在请求成功时输出响应数据。
- 发送一个 POST 请求
使用 $http 发送一个 POST 请求同样非常简单。下面是一个示例代码：
$http.post('/api/data', {key: 'value'}).then(function (response) {
console.log(response.data);
});这个代码使用 $http.post 方法向 '/api/data' 地址发送一个 POST 请求，并带有一个 JSON 数据。在请求成功时，输出响应数据。
- 配置请求选项
当我们发送一个 Ajax 请求时，有可能需要配置一些选项，如请求头、超时时间、缓存等。$http 服务提供了许多可以用来配置请求选项的方法：
-- -------------------- ---- -------
-------
---- ------------
------- ------
------- ------ ---
-------- -------------------- ------------------
-------- -----
------ ----
---------------- ---------- -
---------------------------
---在这个示例代码中，我们使用 $http 方法发送一个 GET 请求。我们使用 params 参数来设置查询参数，使用 headers 参数来设置请求头，使用 timeout 参数来设置请求超时时间，使用 cache 参数来开启请求结果缓存等。
二、$http 服务的进阶使用
- 使用拦截器
在实际开发中，我们有时候需要对 Ajax 请求进行一些全局的操作。比如，我们需要在发送所有请求前添加一些请求头，或者在请求响应后处理一些公共的逻辑等。这时候，$http 服务提供了拦截器的功能，我们可以在请求发送前和响应返回时进行一些操作。
下面是一个添加请求头的示例代码：
$httpProvider.interceptors.push(function () {
return {
request: function (config) {
config.headers['X-Requested-With'] = 'XMLHttpRequest';
return config;
}
};
});在这个代码中，我们添加了一个拦截器，它会在每个请求发送前给请求头添加一个 'X-Requested-With' 属性。这样，在发送 Ajax 请求时，这个请求头属性就会被添加到所有请求中。
- 使用 promise
在发送 Ajax 请求时，我们通常使用 promise 来处理请求的响应。$http 服务自带 promise，所以我们可以直接返回 $http 方法的 response 对象来获取请求响应数据。
下面是一个 promise 使用的示例代码：
$http.get('/api/data').then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error);
});在这个代码中，我们使用 $http.get 方法发送一个 GET 请求，并使用 then 和 catch 方法分别处理请求成功和请求失败的情况。
三、总结
本文介绍了 Angular 中如何使用 $http 服务来发送 Ajax 请求。我们学习了 $http 服务的基本使用、配置请求选项、使用拦截器和 promise 等进阶用法。希望这些内容能够对你的实际开发有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a4d99eadd4f0e0ffd33103