在 Web 开发中，HTTP 请求是一个非常重要的环节。在 AngularJS 中，我们可以通过 $http 服务来发起 HTTP 请求，获取服务器返回的数据。在本篇文章中，我们将详细介绍 AngularJS 的 HTTP 请求的使用方法，并提供一些深度学习和指导意义。
发送 HTTP 请求
在 AngularJS 中，我们可以使用 $http 服务来发送 HTTP 请求。$http 服务是一个封装了 XMLHttpRequest 对象的 AngularJS 服务，它可以与服务器进行数据交互。以下是 $http 服务最常用的请求方式：
GET 请求
GET 请求用于从服务器获取数据。它通常将数据放在 URL 的查询字符串中，例如：http://example.com/api/users?name=john&age=30。在 AngularJS 中，我们可以使用以下代码发送 GET 请求：
$http.get('/api/users').then(function(response) {
console.log(response.data);
}, function(error) {
console.error(error);
});我们可以通过 $http.get() 方法来发送 GET 请求，然后通过 .then() 方法来处理服务器返回的数据。.then() 方法有两个回调函数，第一个回调函数用于处理请求成功的响应，第二个回调函数用于处理请求失败的情况。
我们可以在 GET 请求中使用参数来向服务器传递查询字符串。例如，我们可以发送以下请求来获取指定用户信息：
$http.get('/api/users', {params: {id: 123}}).then(function(response) {
console.log(response.data);
}, function(error) {
console.error(error);
});在上述代码中，我们使用了一个对象作为第二个参数来传递参数。这个对象包含了一个 params 属性，它是一个键值对的对象，用于指定查询参数。
POST 请求
POST 请求用于向服务器提交数据。它通常将数据放在请求的消息体中。在 AngularJS 中，我们可以使用以下代码发送 POST 请求：
$http.post('/api/users', {name: 'john', age: 30}).then(function(response) {
console.log(response.data);
}, function(error) {
console.error(error);
});我们可以通过 $http.post() 方法来发送 POST 请求，然后通过 .then() 方法来处理服务器返回的数据。在 POST 请求中，我们可以使用第二个参数来指定请求的消息体。
PUT 请求
PUT 请求用于向服务器更新数据。它通常将数据放在请求的消息体中。在 AngularJS 中，我们可以使用以下代码发送 PUT 请求：
$http.put('/api/users/123', {name: 'tom', age: 25}).then(function(response) {
console.log(response.data);
}, function(error) {
console.error(error);
});我们可以通过 $http.put() 方法来发送 PUT 请求，然后通过 .then() 方法来处理服务器返回的数据。在 PUT 请求中，我们需要指定要更新的数据在服务器中的位置，并将更新的数据放在请求的消息体中。
DELETE 请求
DELETE 请求用于从服务器删除数据。它通常将要删除的数据放在 URL 中，例如：http://example.com/api/users/123。在 AngularJS 中，我们可以使用以下代码发送 DELETE 请求：
$http.delete('/api/users/123').then(function(response) {
console.log(response.data);
}, function(error) {
console.error(error);
});我们可以通过 $http.delete() 方法来发送 DELETE 请求，然后通过 .then() 方法来处理服务器返回的数据。在 DELETE 请求中，我们需要指定要删除的数据在服务器中的位置。
处理 HTTP 响应
在 AngularJS 中，发送 HTTP 请求后，我们可以通过 .then() 方法来处理服务器返回的数据。在本节中，我们将介绍如何处理 HTTP 响应。
处理成功的响应
我们可以通过 .then() 方法的第一个回调函数来处理成功的响应。在回调函数中，我们可以访问 response 对象来获取响应的数据。以下是一个处理 GET 请求成功响应的例子：
$http.get('/api/users').then(function(response) {
console.log(response.data);
}, function(error) {
console.error(error);
});在上述代码中，我们通过 response.data 来访问响应的数据。
处理失败的响应
我们可以通过 .then() 方法的第二个回调函数来处理失败的响应。在回调函数中，我们可以访问 error 对象来获取响应的错误信息。以下是一个处理 GET 请求失败响应的例子：
$http.get('/api/users').then(function(response) {
console.log(response.data);
}, function(error) {
console.error(error);
});在上述代码中，我们通过 console.error(error) 来输出错误信息。
使用拦截器
在 AngularJS 中，我们可以使用拦截器来处理 HTTP 请求和响应。拦截器是一种可以改变请求和响应信息的工具，它可以在请求发送前和响应到达前进行干预。以下是一个包含请求拦截器和响应拦截器的例子：
-- -------------------- ---- -------
----------------------- ---
----------------------------- ------------ -
------ -
-------- ---------------- -
-------------------- --------- --------
------ -------
--
--------- ------------------ -
------------------------ ----------
------ ---------
--
-------------- ------------------- -
------------------------------- -----------
------ ---------------------
-
--
--
------------------------------- -
-----------------------------------------------------
---在上述代码中，我们使用 .factory() 方法创建了一个名为 myHttpInterceptor 的拦截器。拦截器的 request 方法可以干预请求，response 方法可以干预响应，responseError 方法可以干预错误响应。在最后，我们通过 $httpProvider.interceptors 属性将拦截器添加到 $httpProvider，这样就可以将拦截器添加到全部的 HTTP 请求中。
总结
在本篇文章中，我们详细介绍了 AngularJS 的 HTTP 请求的使用方法，并提供了一些深度学习和指导意义。我们学习了发送 GET、POST、PUT 和 DELETE 请求的方法，并介绍了如何处理 HTTP 响应。此外，我们还了解了拦截器的使用方法。希望本篇文章对你在 AngularJS 中使用 HTTP 请求有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651a360895b1f8cacd2359a9