Angular 中如何使用 $http 发送 Ajax 请求-JavaScript中文网-JavaScript教程资源分享门户

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({
    url: '/api/data',
    method: 'GET',
    params: {page: 1},
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    timeout: 3000,
    cache: true
}).then(function (response) {
    console.log(response.data);
});

在这个示例代码中，我们使用 $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

Angular 中如何使用 $http 发送 Ajax 请求

纠错反馈