Interceptors và Http Service trong Angular

Khi làm việc với AngularJS, hiểu về Interceptors và Http Service là rất quan trọng để giúp ứng dụng của bạn tương tác với các dịch vụ HTTP một cách hiệu quả và linh hoạt.

Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về Interceptors và Http Service trong AngularJS. Bằng cách sử dụng Interceptors, chúng ta có thể can thiệp vào các yêu cầu HTTP trước khi gửi đi hoặc sau khi nhận được phản hồi từ server, trong khi Http Service cung cấp cho chúng ta các phương thức để tương tác với các dịch vụ HTTP. Hiểu rõ về hai thành phần này sẽ giúp cho việc phát triển các ứng dụng AngularJS trở nên dễ dàng và hiệu quả hơn.

Http Service trong AngularJS là gì?

Http Service là một trong những service quan trọng trong AngularJS, cung cấp các phương thức để tương tác với các dịch vụ HTTP như GET, POST, PUT và DELETE. Http Service giúp chúng ta gửi các yêu cầu HTTP đến server và nhận phản hồi từ server. Nó được sử dụng để giao tiếp với các API hoặc dịch vụ web, lấy dữ liệu từ server và cập nhật dữ liệu trên server.

Http Service cũng cung cấp các tính năng khác như xử lý lỗi, quản lý phiên bản của các yêu cầu và phản hồi, cung cấp cơ chế xác thực và cho phép xử lý các yêu cầu trước khi gửi đi. Điều này giúp cho việc tương tác với các dịch vụ HTTP trở nên dễ dàng và linh hoạt hơn.

Bài viết này được đăng tại [free tuts .net]

Http Service là một thành phần quan trọng trong việc phát triển ứng dụng web động với AngularJS, cho phép chúng ta tạo các ứng dụng web với các tính năng như lấy dữ liệu từ server, cập nhật dữ liệu, xóa dữ liệu và thực hiện các hoạt động khác trên server.

Các phương thức cơ bản của Http Service trong AngularJS

Http Service trong AngularJS cung cấp cho chúng ta các phương thức để tương tác với các dịch vụ HTTP như GET, POST, PUT và DELETE. Dưới đây là các phương thức cơ bản của Http Service:

• GET(): Phương thức GET được sử dụng để yêu cầu dữ liệu từ server. Chúng ta có thể truyền tham số trong URL để tìm kiếm dữ liệu mong muốn.

• POST(): Phương thức POST được sử dụng để gửi dữ liệu đến server để tạo mới hoặc cập nhật các đối tượng trên server.

• PUT(): Phương thức PUT được sử dụng để cập nhật dữ liệu của một đối tượng đã tồn tại trên server.

• DELETE(): Phương thức DELETE được sử dụng để xóa một đối tượng từ server.

Ngoài ra, Http Service còn hỗ trợ các phương thức khác như PATCH() để cập nhật một phần dữ liệu của một đối tượng trên server, HEAD() để lấy thông tin về các tiêu đề của một tài nguyên và OPTIONS() để lấy thông tin về các phương thức HTTP được hỗ trợ bởi server.

Các phương thức này được sử dụng để gửi các yêu cầu HTTP đến server và nhận phản hồi từ server. Chúng ta có thể sử dụng các phương thức này để tạo các ứng dụng web động với các tính năng như lấy dữ liệu từ server, cập nhật dữ liệu, xóa dữ liệu và thực hiện các hoạt động khác.

Sử dụng Http Service để gửi và nhận HTTP requests trong AngularJS

Để sử dụng Http Service để gửi HTTP requests và nhận HTTP responses trong AngularJS, chúng ta cần thực hiện các bước sau:

Import HttpModule từ @angular/http:

Trước khi sử dụng Http Service, chúng ta cần import HttpModule từ @angular/http trong module của ứng dụng của chúng ta bằng cách thêm dòng sau vào file app.module.ts:

import { HttpModule } from '@angular/http';

@NgModule({
  imports: [
    HttpModule
  ],
  // ...
})
export class AppModule { }

Inject Http Service vào component:

Sau khi đã import HttpModule vào module của ứng dụng, chúng ta có thể sử dụng Http Service bằng cách inject nó vào component. Để làm điều này, chúng ta cần import Http từ @angular/http và inject nó vào constructor của component như sau:

import { Http } from '@angular/http';

export class AppComponent {
  constructor(private http: Http) { }
}

Sử dụng các phương thức của Http Service:

Sau khi đã inject Http Service vào component, chúng ta có thể sử dụng các phương thức của nó để gửi các yêu cầu HTTP đến server và nhận phản hồi từ server. Ví dụ, để gửi một yêu cầu GET đến server và nhận dữ liệu từ server, chúng ta có thể sử dụng phương thức get() của Http Service như sau:

this.http.get('https://api.example.com/data')
  .subscribe(response => console.log(response.json()));

Trong đoạn mã trên, chúng ta gửi một yêu cầu GET đến đường dẫn 'https://api.example.com/data' và sử dụng phương thức subscribe() để đăng ký một hàm callback để xử lý phản hồi từ server. Trong hàm callback này, chúng ta sử dụng phương thức json() để chuyển đổi phản hồi từ server sang định dạng JSON.

Tương tự, chúng ta có thể sử dụng các phương thức khác của Http Service như post(), put() và delete() để gửi các yêu cầu HTTP đến server và nhận phản hồi từ server.

Interceptors trong AngularJS là gì?

Interceptors là một thành phần trong các kiến trúc phần mềm sử dụng trong lập trình. Nó là một mô hình thiết kế cho phép các hành động được thực hiện trước hoặc sau khi một yêu cầu (request) được xử lý bởi một ứng dụng. Interceptor thường được sử dụng để kiểm soát và thay đổi luồng của các yêu cầu và phản hồi.

Trong các ứng dụng web, interceptor thường được sử dụng để thêm các header, xác thực người dùng, kiểm tra quyền truy cập, kiểm tra tính hợp lệ của dữ liệu và nhiều hơn nữa. Nó có thể được triển khai bằng cách sử dụng các thư viện hoặc framework như Spring Interceptor trong Java hoặc Express.js Middleware trong Node.js.

Các loại Interceptors trong AngularJS

Có 2 loại Interceptors trong AngularJS

Request Interceptors: Đây là các interceptor sẽ được gọi trước khi yêu cầu HTTP được gửi đi. Các request interceptor có thể được sử dụng để thêm các header, thông tin xác thực, hoặc thay đổi các thông tin yêu cầu trước khi nó được gửi đi.

Response Interceptors: Đây là các interceptor sẽ được gọi sau khi nhận được phản hồi HTTP. Các response interceptor có thể được sử dụng để xử lý và thay đổi dữ liệu phản hồi, hoặc thực hiện các hành động sau khi nhận được phản hồi.

Cả Request Interceptors và Response Interceptors đều được triển khai bằng cách sử dụng các interceptor factories. Ví dụ:

// Request Interceptor
app.factory('myRequestInterceptor', function() {
  var interceptor = {};

  interceptor.request = function(config) {
    // Thêm header vào request
    config.headers['Authorization'] = 'Bearer ' + token;
    return config;
  };

  return interceptor;
});

// Response Interceptor
app.factory('myResponseInterceptor', function() {
  var interceptor = {};

  interceptor.response = function(response) {
    // Xử lý dữ liệu phản hồi
    response.data = response.data.replace('foo', 'bar');
    return response;
  };

  return interceptor;
});

Sau đó, bạn có thể đăng ký các interceptor này với $httpProvider để sử dụng chúng trong toàn bộ ứng dụng:

app.config(function($httpProvider) {
  $httpProvider.interceptors.push('myRequestInterceptor');
  $httpProvider.interceptors.push('myResponseInterceptor');
});

Sử dụng Interceptors để quản lý HTTP requests trong AngularJS

Dưới đây là một số cách bạn có thể sử dụng Interceptors để quản lý các HTTP requests trong AngularJS:

Thêm các header cho request

Bạn có thể sử dụng Interceptors để thêm các header cho request như token xác thực, hoặc các thông tin bổ sung khác. Điều này giúp bạn không phải lặp lại việc thêm header cho từng request riêng lẻ.

app.factory('authInterceptor', function() {
  var authInterceptor = {};

  authInterceptor.request = function(config) {
    config.headers['Authorization'] = 'Bearer ' + token;
    return config;
  };

  return authInterceptor;
});

app.config(function($httpProvider) {
  $httpProvider.interceptors.push('authInterceptor');
});

Xử lý lỗi cho request

Interceptor cũng có thể được sử dụng để xử lý các lỗi trong request và hiển thị các thông báo lỗi phù hợp cho người dùng.

app.factory('errorInterceptor', function($q) {
  var errorInterceptor = {};

  errorInterceptor.responseError = function(rejection) {
    if (rejection.status === 401) {
      // Hiển thị thông báo đăng nhập lại
    } else if (rejection.status === 404) {
      // Hiển thị thông báo không tìm thấy trang
    } else {
      // Hiển thị thông báo lỗi khác
    }

    return $q.reject(rejection);
  };

  return errorInterceptor;
});

app.config(function($httpProvider) {
  $httpProvider.interceptors.push('errorInterceptor');
});

Thực hiện các thay đổi trước khi request được gửi

Bạn có thể sử dụng Interceptors để thực hiện các thay đổi trước khi request được gửi, chẳng hạn như thay đổi endpoint hoặc thêm thông tin bổ sung vào request.

app.factory('endpointInterceptor', function() {
  var endpointInterceptor = {};

  endpointInterceptor.request = function(config) {
    if (config.url === '/api/users') {
      config.url = '/api/users/latest';
      config.params = { limit: 10 };
    }

    return config;
  };

  return endpointInterceptor;
});

app.config(function($httpProvider) {
  $httpProvider.interceptors.push('endpointInterceptor');
});

Trên đây là một số cách bạn có thể sử dụng Interceptors để quản lý các HTTP requests trong AngularJS. Interceptors rất mạnh mẽ và có nhiều ứng dụng khác nhau, bạn có thể tùy chỉnh và sử dụng chúng để đáp ứng các yêu cầu của ứng dụng của bạn.

Kết hợp Http Service và Interceptors trong AngularJS

Sử dụng Interceptors để xử lý các HTTP requests trước khi gửi đi

Sử dụng Interceptors để xử lý các HTTP requests trước khi gửi đi là một trong những tính năng mạnh mẽ và hữu ích nhất của AngularJS. Nó cho phép bạn can thiệp vào quá trình gửi request để thực hiện các thay đổi trước khi request được gửi đi.

Để sử dụng Interceptors để xử lý các HTTP requests trước khi gửi đi, bạn có thể làm theo các bước sau:

Bước 1: Tạo một factory để định nghĩa Interceptor

app.factory('myInterceptor', function() {
  var myInterceptor = {};

  myInterceptor.request = function(config) {
    // Thực hiện các thay đổi trên request ở đây
    return config;
  };

  return myInterceptor;
});

Trong đó, hàm request sẽ được gọi trước khi request được gửi đi. Bạn có thể thực hiện các thay đổi trên request ở đây và trả về một đối tượng config mới để gửi đi.

Bước 2: Thêm Interceptor vào $httpProvider

app.config(function($httpProvider) {
  $httpProvider.interceptors.push('myInterceptor');
});

Với cấu hình này, mọi request sẽ được xử lý bởi Interceptor bạn đã định nghĩa.

Bước 3: Sử dụng Interceptor để thực hiện các thay đổi trên request

Bạn có thể sử dụng Interceptor để thực hiện các thay đổi trên request trước khi nó được gửi đi, chẳng hạn như thêm các header mới hoặc thay đổi endpoint của request.

app.factory('myInterceptor', function() {
  var myInterceptor = {};

  myInterceptor.request = function(config) {
    if (config.url === '/api/users') {
      // Thêm header mới vào request
      config.headers['Authorization'] = 'Bearer ' + authToken;

      // Thay đổi endpoint của request
      config.url = '/api/users/latest';
    }

    return config;
  };

  return myInterceptor;
});

Trong ví dụ trên, nếu URL của request là "/api/users", Interceptor sẽ thêm một header mới vào request và thay đổi endpoint của request thành "/api/users/latest" trước khi nó được gửi đi.

Sử dụng Interceptors để xử lý các HTTP responses trước khi trả về

Ở trên chúng ta đã tạo một factory để định nghĩa Interceptor,thêm Interceptor vào $httpProvider khi gửi đi rồi thì trả về ta có cách sử dụng Interceptor để thực hiện các thay đổi trên response .Bạn có thể sử dụng Interceptor để thực hiện các thay đổi trên response trước khi nó được trả về cho ứng dụng của bạn, chẳng hạn như thêm các thông tin mới vào response hoặc xử lý lỗi.

app.factory('myInterceptor', function() {
  var myInterceptor = {};

  myInterceptor.response = function(response) {
    if (response.data && response.data.error) {
      // Xử lý lỗi ở đây
      console.log(response.data.error);
    }

    // Thêm thông tin mới vào response
    response.data.newData = 'new';

    return response;
  };

  return myInterceptor;
});

Ứng dụng Interceptors và Http Service trong AngularJS

Tích hợp Interceptors và Http Service vào ứng dụng AngularJS

Để tích hợp Interceptors và Http Service vào ứng dụng AngularJS, ta có thể làm theo các bước sau:

Bước 1: Khởi tạo Interceptor

Đầu tiên, ta sẽ khởi tạo Interceptor bằng cách sử dụng provider của AngularJS. Provider cho phép ta đăng ký các service để sử dụng trong ứng dụng. Trong trường hợp này, ta đăng ký một Interceptor để xử lý các yêu cầu HTTP trước khi gửi đi.

app.factory('myInterceptor', function() {
  var interceptor = {
    request: function(config) {
      // Xử lý yêu cầu trước khi gửi đi
      return config;
    },
    response: function(response) {
      // Xử lý phản hồi sau khi nhận được
      return response;
    },
    responseError: function(rejection) {
      // Xử lý lỗi phản hồi
      return $q.reject(rejection);
    }
  };
  return interceptor;
});

Bước 2: Đăng ký Interceptor

Sau khi đã khởi tạo Interceptor, ta cần đăng ký Interceptor để nó được sử dụng trong ứng dụng. Để đăng ký Interceptor, ta có thể sử dụng phương thức config của module.

app.config(function($httpProvider) {
  $httpProvider.interceptors.push('myInterceptor');
});

Bước 3: Sử dụng Http Service

Sau khi đã đăng ký Interceptor, ta có thể sử dụng Http Service để thực hiện các yêu cầu HTTP trong ứng dụng. Ví dụ như, ta có thể sử dụng Http Service để gửi một yêu cầu GET đến server và nhận phản hồi trả về.

app.controller('MyCtrl', function($scope, $http) {
  $http.get('/api/data')
    .then(function(response) {
      $scope.data = response.data;
    })
    .catch(function(error) {
      console.log(error);
    });
});

Sử dụng Interceptors và Http Service để tạo một ứng dụng CRUD

Để tạo một ứng dụng CRUD đơn giản sử dụng Interceptors và Http Service trong AngularJS, bạn có thể làm theo các bước sau:

Bước 1: Tạo một Service để gửi yêu cầu HTTP

app.factory('myService', function($http) {
  var urlBase = '/api';
  var myService = {};

  myService.getData = function() {
    return $http.get(urlBase + '/data');
  };

  myService.addData = function(data) {
    return $http.post(urlBase + '/data', data);
  };

  myService.updateData = function(data) {
    return $http.put(urlBase + '/data/' + data.id, data);
  };

  myService.deleteData = function(id) {
    return $http.delete(urlBase + '/data/' + id);
  };

  return myService;
});

Trong đó, urlBase là đường dẫn cơ sở cho các yêu cầu HTTP, và getData, addData, updateData và deleteData được sử dụng để gửi các yêu cầu HTTP tương ứng.

Bước 2: Tạo một Interceptor để quản lý lỗi HTTP

app.factory('myHttpInterceptor', function($q) {
  var myHttpInterceptor = {};

  myHttpInterceptor.responseError = function(rejection) {
    if (rejection.status === 404) {
      // Xử lý lỗi ở đây
      console.log('Not found');
    }

    // Đưa rejection trở lại để giữ nguyên quá trình xử lý lỗi
    return $q.reject(rejection);
  };

  return myHttpInterceptor;
});

Bước 3: Thêm Interceptor vào $httpProvider

app.config(function($httpProvider) {
  $httpProvider.interceptors.push('myHttpInterceptor');
});

Bước 4: Tạo một Controller để thao tác với dữ liệu

app.controller('myController', function($scope, myService) {
  $scope.data = [];
  $scope.newData = {};

  // Lấy dữ liệu từ server
  myService.getData().then(function(response) {
    $scope.data = response.data;
  });

  // Thêm dữ liệu mới
  $scope.addData = function() {
    myService.addData($scope.newData).then(function(response) {
      $scope.data.push(response.data);
      $scope.newData = {};
    });
  };

  // Cập nhật dữ liệu
  $scope.updateData = function(data) {
    myService.updateData(data).then(function(response) {
      // Thực hiện xử lý khi cập nhật thành công
    });
  };

  // Xóa dữ liệu
  $scope.deleteData = function(id) {
    myService.deleteData(id).then(function(response) {
      // Thực hiện xử lý khi xóa thành công
      $scope.data = $scope.data.filter(function(d) {
        return d.id !== id;
      });
    });
  };
});

Trong đó, $scope.data là một mảng để lưu trữ dữ liệu lấy về từ server, và $scope.newData là một đối tượng để lưu trữ dữ liệu mới được thêm vào. addData, updateData và deleteData được sử dụng myService để gửi các yêu cầu HTTP tương ứng để thêm, cập nhật và xóa dữ liệu. Khi xảy ra lỗi HTTP, Interceptor sẽ được sử dụng để xử lý lỗi trước khi trả về cho Controller.

Bước 4: Thêm giao diện người dùng

<div ng-controller="myController">
  <ul>
    <li ng-repeat="d in data">
      {{d.name}} - {{d.description}} <a href="#" ng-click="deleteData(d.id)">Xóa</a>
    </li>
  </ul>

  <form ng-submit="addData()">
    <input type="text" ng-model="newData.name" placeholder="Tên">
    <input type="text" ng-model="newData.description" placeholder="Mô tả">
    <button type="submit">Thêm mới</button>
  </form>
</div>

Ở đây, một danh sách các mục được hiển thị bên trong thẻ ul, và mỗi mục chứa tên và mô tả của dữ liệu. Nút Xóa được sử dụng để xóa mục tương ứng. Bên dưới danh sách, một form được sử dụng để thêm dữ liệu mới với tên và mô tả.

Sử dụng Interceptors và Http Service để tạo một ứng dụng đăng nhập và đăng ký

Để tạo một ứng dụng đăng nhập và đăng ký sử dụng Interceptors và Http Service trong AngularJS, bạn có thể làm theo các bước sau:

Bước 1: Tạo một dịch vụ để xử lý yêu cầu HTTP

Đầu tiên, bạn cần tạo một dịch vụ để xử lý các yêu cầu HTTP đến server. Trong ví dụ này, chúng ta sẽ sử dụng $http service để gửi các yêu cầu đến server. Dưới đây là ví dụ về dịch vụ $http:

app.service('httpService', ['$http', function($http) {
  this.post = function(url, data) {
    return $http.post(url, data);
  };

  this.get = function(url, data) {
    return $http.get(url, data);
  };
}]);

Ở đây, dịch vụ httpService có hai phương thức post() và get() để gửi yêu cầu POST và GET đến server tương ứng.

Bước 2: Tạo một Interceptor để xử lý lỗi HTTP

Tiếp theo, bạn cần tạo một Interceptor để xử lý các lỗi HTTP trước khi chúng được trả về cho Controller. Dưới đây là một ví dụ về Interceptor:

app.factory('httpInterceptor', ['$q', function($q) {
  var interceptor = {
    'responseError': function(response) {
      if (response.status === 401) {
        // Redirect to login page
      } else if (response.status === 403) {
        // Show unauthorized error message
      } else if (response.status === 500) {
        // Show internal server error message
      }

      return $q.reject(response);
    }
  };

  return interceptor;
}]);

Ở đây, Interceptor có phương thức responseError() để xử lý các lỗi HTTP trả về. Trong ví dụ này, nếu lỗi HTTP là 401, Interceptor sẽ chuyển hướng người dùng đến trang đăng nhập. Nếu lỗi là 403, Interceptor sẽ hiển thị một thông báo lỗi không được ủy quyền, và nếu lỗi là 500, Interceptor sẽ hiển thị một thông báo lỗi server.

Bước 3: Tạo các Controller cho đăng nhập và đăng ký

Tiếp theo, bạn cần tạo hai Controller để quản lý đăng nhập và đăng ký của người dùng. Dưới đây là ví dụ về các Controller này:

app.controller('loginController', ['$scope', 'httpService', function($scope, httpService) {
  $scope.login = function() {
    httpService.post('/login', {username: $scope.username, password: $scope.password})
      .then(function(response) {
        // Handle successful login
      }, function(response) {
        // Handle login error
      });
  };
}]);

app.controller('registerController', ['$scope', 'httpService', function($scope, httpService) {
  $scope.register = function() {
    httpService.post('/register', {username

Kết bài viết

Trong bài viết này, chúng ta đã tìm hiểu về cách sử dụng Interceptors và Http Service để quản lý HTTP requests và responses trong AngularJS. Chúng ta đã tìm hiểu cách sử dụng Interceptors để xử lý các yêu cầu HTTP trước khi gửi đi, xử lý các responses trước khi trả về, và quản lý các lỗi HTTP.

Chúng ta cũng đã thực hành sử dụng Interceptors và Http Service để tạo ra hai ứng dụng CRUD đơn giản và đăng nhập và đăng ký. Sử dụng các kỹ thuật này, chúng ta có thể tạo ra các ứng dụng web mạnh mẽ và ổn định với các tính năng quản lý yêu cầu HTTP hiệu quả.

Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về cách sử dụng Interceptors và Http Service trong AngularJS và giúp bạn phát triển các ứng dụng web tốt hơn.