Sử dụng ứng dụng HTTP Client của Angular v4

Một dịch vụ HttpClient mới cũng đã có trong HttpClientModule và nó có thể được sử dụng để bắt đầu yêu cầu HTTP. Trong hướng dẫn này, tôi sẽ chỉ cho bạn triển khai ứng dụng mới này và kiểm tra một số tính năng của nó.

Chúng tôi đã nói về HTTP Client theo chiều sâu trong một bài viết trước: Angular 2 HTTP Requests with Observables

TLDR

Để nhập vào một NgModule:

// below v4 ==========================================

...
@NgModule({
    imports: [
        HttpModule
    ]
})
...

// v4+ ===============================================

...
@NgModule({
    imports: [
        HttpClientModule
    ]
})
...

Và để sử dụng bên trong dịch vụ:

// below v4 ==========================================

...
...

// v4+ ===============================================

...
...

Chúng ta hãy xem xét sâu hơn.

Cài đặt Angular v4

Để bắt đầu cài đặt Angular CLI sử dụng Node và NPM nếu bạn chưa cài đặt nó.

npm install -g @angular/cli@latest

Các -gchuyển đổi để cài đặt nó trên toàn cầu và @latest cho phiên bản mới. Sau khi quá trình cài đặt hoàn tất, hãy chạy lệnh sau để chèn một ứng dụng mới

Thao tác này sẽ tải template của dự án và cài đặt tất cả. Cấu trúc thư mục dự án sẽ giống như thế này.

// end-to-end-tests
|- e2e/

// npm dependencies
|- node_modules/

// public facing app. built things go here. this wont show until we run a build
|- dist/

// where most of the work will be done
|- src/

// overall configuration
|- chúng tôi  // the main configuration file
|- .editorconfig      // editorconfig which is used in some VS Code setups
|- .gitignore
|- karma.conf.js
|- package.json
|- protractor.conf.js
|- README.md
|- tsconfig.json
|- tslint.json

Mở tập tin package.jsonvà cập nhật sự phụ thuộc vào phiên bản 4.3.6. Vì vậy, dependencies và devDependenciessection của tập tin như thế này:

"dependencies": {
    "@angular/animations": "^4.3.6",
    "@angular/common": "^4.3.6",
    "@angular/compiler": "^4.3.6",
    "@angular/core": "^4.3.6",
    "@angular/forms": "^4.3.6",
    "@angular/platform-browser": "^4.3.6",
    "@angular/platform-browser-dynamic": "^4.3.6",
    "@angular/router": "^4.3.6",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.3.6",
    "@angular/language-service": "^4.3.6",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }

Tiếp đó, chạy file project directory

npm install

Điều này sẽ kéo các dependences vào file package.json. Để xem nếu mọi thứ hoạt động đúng, bắt đầu chạy development web server:

ng serve

Cài đặt HTTP module

Tiếp theo, nhập HttpClientModule vào phần mô-đun gốc của ứng dụng tệp src/app/app.module.ts và thêm nó vào thuộc tính imports. Vì vậy, các tập tin trông như thế này:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';



@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
})
export class AppComponent {
  title = 'app';


  }
}

Bây giờ bạn sẽ có thể thực hiện các hoạt động CRUD và thực hiện các yêu cầu HTTP. Các phương thức HTTP khả dụng là post, put, delete, patch, head và jsonp.

HTTP GET

Sau đó nhấp vào Resources/posts

import { Component, OnInit } from '@angular/core'; // importing the OnInit interface


@Component({
  selector: 'app-root',
})
export class AppComponent implements OnInit { // implementing OnInit
  title = 'app';


  }
  ngOnInit(): void { // adding the lifecycle hook ngOnInit
    });
  }

}

Chúng tôi gọi phương thức get từ trường hợp này, dự kiến URL của điểm cuối API mà chúng ta quan tâm. Phương thức get trả về một giá trị có thể quan sát được vì vậy chúng ta cần phải đăng ký với thông tin này để được thông báo khi đáp ứng đến, điều này được thực hiện bằng cách gọi phương pháp subscribe. Trong phương pháp subscribe, chúng ta đưa một trình xử lý sự kiện nhận dữ liệu, sau đó chúng ta có thể nhập vào bảng điều khiển. Đầu ra được hiển thị trong bảng điều khiển của trình duyệt sẽ giống như sau:

interface DataResponse {
  userId: string;
  id: string;
  title: string;
}

Tiếp theo, chỉnh sửa lệnh get call để sử dụng giao diện DataResponse:

console.log(‘UserId: ‘ + data.userId);
console.log(‘Id: ‘ + data.id);
console.log(‘Title: ‘ + data.title);
console.log(‘Body: ‘ + data.body);
});

Bây giờ chúng ta có thể truy cập các thuộc tính userId, title và body riêng biệt. Đầu ra giao diện điều khiển sẽ giống như sau:

// …

console.log(‘UserId: ‘ + data.userId);
console.log(‘Id: ‘ + data.id);
console.log(‘Title: ‘ + data.title);
console.log(‘Body: ‘ + data.body);
},
if (err.error instanceof Error) {
console.log(‘Client-side error occured.’);
} else {
console.log(‘Server-side error occured.’);
}
}
);

HTTP POST

title: ‘foo’,
body: ‘bar’,
userId: 1
})
.subscribe(
console.log(res);
},
console.log(‘Error occured’);
}
);

Phương pháp post trả lại một lần nữa có thể giám sát vì vậy chúng ta cần phải đăng ký nhận xét này như trước, điều này được thực hiện bằng cách gọi phương thức đăng ký. Với phương pháp đăng ký, chúng ta hiểu một trình xử lý sự kiện nhận dữ liệu, sau đó chúng ta có thể in vào bảng điều khiển. Sau đó, chúng ta thêm trình xử lý lỗi để in thông tin nếu xảy ra lỗi. Đầu ra được hiển thị trong bảng điều khiển của trình duyệt sẽ giống như sau:

HTTP Interceptor

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/observable';
@Injectable()
export class TypicodeInterceptor implements HttpInterceptor {
    const authReq = req.clone({
      headers: req.headers.set('Accept-Language', 'Test')
    });
    return next.handle(authReq);
  }
}

Tiếp theo chúng ta thêm vào @injectable , sau đó tạo ra class TypicodeInterceptor thực thi giao diện HttpInterceptor. Sau đó chúng ta bổ sung phương thức interceptor trong việc thực hiện class.

Tiếp theo chúng ta gọi phương thức req.clone() để nhân bản yêu cầu HTTP ban đầu. Bên trong phương pháp này chúng ta thay đổi trường tiêu đề được thực hiện bằng cách gọi phương thức req.headers.set(). Ở đây chúng ta thay đổi trường Accept-Language bằng cách thay đổi giá trị của nó thành Test.

Cuối cùng, đối tượng yêu cầu vừa được tạo ra (có header bao gồm) được chuyển tiếp để xử lý tiếp bằng cách sử dụng phương thức next.handle.

Người cung cấp Interceptor

Để lấy interceptor để chúng tôi sử dụng chúng, chúng ta phải chỉnh sửa tập tin src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TypicodeInterceptor } from './typicode.interceptor';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: TypicodeInterceptor,
    multi: true
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }

provide: cần được đặt thành HTTP_INTERCEPTORS để xác định rằng một máy chủ chặn HTTP được cung cấp
useClass: cần phải được thiết lập để loại interceptor class của chúng tôi
multi: cần được đặt thành multi để nói với Angular rằng HTTP_INTERCEPTORS là một mảng các giá trị, chứ không phải là một giá trị duy nhất

Kết luận

Topdev via Scotch