Home Web Front-end JS Tutorial How to use $http service in angular

How to use $http service in angular

Mar 16, 2018 pm 05:24 PM
angular http how

This time I will show you how to use the $http service in angular. What are the precautions when using the $http service in angular? The following is a practical case, let's take a look.

$http service

$http(requestConfig) is just an encapsulated XMLHttpRequest object.

requestConfig is an object, which is the parameter for sending the request.

Return a Promise object

1

$http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 }, function errorCallback(response) { // 请求失败执行代码 });

Copy after login

When promise returns, it can be called in a chain. You can also use the then method to handle callbacks.

If the response status code is between 200 and 299, the response will be considered successful and the success callback will be called, otherwise the error
callback will be called.

Call the then(), success() and error() methods on the HttpPromise object. The main difference between the then() method and the other two methods is that it will receive the complete response object, while success() and error() will destruct the response object.

Shortcut method

1

2

3

4

5

6

7

8

$http.get

$http.get

$http.head

$http.post

$http.put

$http.delete

$http.jsonp

$http.patch

Copy after login

Response object

The response object passed by AngularJS to the then() method contains four properties.

 data (
String or object) This data represents the converted response body (if conversion is defined).
 status (numeric type)
The
HTTP status code of the response.  headers (function)
This function is the getter function of header information, which can accept a parameter to obtain the value of the corresponding name. For example, use the following code to obtain the value of X-Auth-ID:

1

2

3

method: 'GET',url: '/api/users.json'}).then (resp) {// 读取X-Auth-ID

resp.headers('X-Auth-ID');

});

Copy after login

 config (object)

This object is the complete settings object used to generate the original request.

 statusText (string)
This string is the HTTP status text of the response.


Caching $http requests

By default, the $http service does not cache requests locally. When making individual requests, we can enable caching by passing a boolean value or a cache instance to the

$http request.

1

2

.success(function(data) {})

 .error(function(data) {});

Copy after login

The first time a request is sent, the $http service will send a GET request to /api/users.json. When the same GET

request is sent for the second time, the $http service will retrieve the request result from the cache without actually sending an HTTP GET request.

In this example, because caching is enabled, AngularJS will use $cacheFactory by default. This service is
automatically created by AngularJS when it starts.
For example, if you want to use LRU (Least Recenlty Used, least recently used) cache, you can pass in the
cache instance object as follows:

1

2

3

4

5

var lru = $cacheFactory('lru',{capacity: 20

 }); // $http请求

 $http.get('/api/users.json', { cache: lru })

 .success(function(data){})

 .error(function(data){});

Copy after login

Pass it every time you send a request Inserting a custom cache is cumbersome (even within a server). You can set a default cache for all $http requests by applying the

.config() function:

1

2

3

4

5

6

angular.module('myApp', [])

     .config(function($httpProvider, $cacheFactory) {

     $httpProvider.defaults.cache = $cacheFactory('lru', {

     capacity: 20

     });

     });

Copy after login

Now, all requests will use our custom LRU cache.


I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!


Recommended reading:

Detailed explanation of localStorage usage of Html5


JavaScript code for creating dynamic menus or drop-down lists


JavaScript code to determine the current fitness in the corresponding layout


JavaScript code to limit the number of text words

The above is the detailed content of How to use $http service in angular. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What does http status code 520 mean? What does http status code 520 mean? Oct 13, 2023 pm 03:11 PM

HTTP status code 520 means that the server encountered an unknown error while processing the request and cannot provide more specific information. Used to indicate that an unknown error occurred when the server was processing the request, which may be caused by server configuration problems, network problems, or other unknown reasons. This is usually caused by server configuration issues, network issues, server overload, or coding errors. If you encounter a status code 520 error, it is best to contact the website administrator or technical support team for more information and assistance.

How to install Angular on Ubuntu 24.04 How to install Angular on Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js is a freely accessible JavaScript platform for creating dynamic applications. It allows you to express various aspects of your application quickly and clearly by extending the syntax of HTML as a template language. Angular.js provides a range of tools to help you write, update and test your code. Additionally, it provides many features such as routing and form management. This guide will discuss how to install Angular on Ubuntu24. First, you need to install Node.js. Node.js is a JavaScript running environment based on the ChromeV8 engine that allows you to run JavaScript code on the server side. To be in Ub

What is http status code 403? What is http status code 403? Oct 07, 2023 pm 02:04 PM

HTTP status code 403 means that the server rejected the client's request. The solution to http status code 403 is: 1. Check the authentication credentials. If the server requires authentication, ensure that the correct credentials are provided; 2. Check the IP address restrictions. If the server has restricted the IP address, ensure that the client's IP address is restricted. Whitelisted or not blacklisted; 3. Check the file permission settings. If the 403 status code is related to the permission settings of the file or directory, ensure that the client has sufficient permissions to access these files or directories, etc.

Understand common application scenarios of web page redirection and understand the HTTP 301 status code Understand common application scenarios of web page redirection and understand the HTTP 301 status code Feb 18, 2024 pm 08:41 PM

Understand the meaning of HTTP 301 status code: common application scenarios of web page redirection. With the rapid development of the Internet, people's requirements for web page interaction are becoming higher and higher. In the field of web design, web page redirection is a common and important technology, implemented through the HTTP 301 status code. This article will explore the meaning of HTTP 301 status code and common application scenarios in web page redirection. HTTP301 status code refers to permanent redirect (PermanentRedirect). When the server receives the client's

How to use Nginx Proxy Manager to implement automatic jump from HTTP to HTTPS How to use Nginx Proxy Manager to implement automatic jump from HTTP to HTTPS Sep 26, 2023 am 11:19 AM

How to use NginxProxyManager to implement automatic jump from HTTP to HTTPS. With the development of the Internet, more and more websites are beginning to use the HTTPS protocol to encrypt data transmission to improve data security and user privacy protection. Since the HTTPS protocol requires the support of an SSL certificate, certain technical support is required when deploying the HTTPS protocol. Nginx is a powerful and commonly used HTTP server and reverse proxy server, and NginxProxy

HTTP 200 OK: Understand the meaning and purpose of a successful response HTTP 200 OK: Understand the meaning and purpose of a successful response Dec 26, 2023 am 10:25 AM

HTTP Status Code 200: Explore the Meaning and Purpose of Successful Responses HTTP status codes are numeric codes used to indicate the status of a server's response. Among them, status code 200 indicates that the request has been successfully processed by the server. This article will explore the specific meaning and use of HTTP status code 200. First, let us understand the classification of HTTP status codes. Status codes are divided into five categories, namely 1xx, 2xx, 3xx, 4xx and 5xx. Among them, 2xx indicates a successful response. And 200 is the most common status code in 2xx

Token-based authentication with Angular and Node Token-based authentication with Angular and Node Sep 01, 2023 pm 02:01 PM

Authentication is one of the most important parts of any web application. This tutorial discusses token-based authentication systems and how they differ from traditional login systems. By the end of this tutorial, you will see a fully working demo written in Angular and Node.js. Traditional Authentication Systems Before moving on to token-based authentication systems, let’s take a look at traditional authentication systems. The user provides their username and password in the login form and clicks Login. After making the request, authenticate the user on the backend by querying the database. If the request is valid, a session is created using the user information obtained from the database, and the session information is returned in the response header so that the session ID is stored in the browser. Provides access to applications subject to

Angular components and their display properties: understanding non-block default values Angular components and their display properties: understanding non-block default values Mar 15, 2024 pm 04:51 PM

The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.

See all articles