Краткий анализ модуля HttpClientModule в обучении Angular

Эта статья поможет вам понять модуль HttpClientModule в Angular, а также познакомит вас с методом запроса, параметрами запроса, содержимым ответа, перехватчиками, прокси-сервером Angular и другими связанными знаниями. Надеюсь, это будет вам полезно!

Этот модуль используется для отправки Http запросов, а методы, используемые для отправки запросов, возвращают объекты Observable . [Рекомендуемые связанные учебные пособия: «учебник по Angular»]

1. Быстрый старт

1), представьте модуль HttpClientModule.

 // приложение.модуль.ts
импортировать { httpClientModule } из @angular/common/http;
импорт: [
httpClientModule
]

2) Внедрить объект экземпляра службы HttpClient для отправки запросов.

 // приложение.компонент.ts
импортировать { HttpClient } из @angular/common/http;

класс экспорта AppComponent {
	конструктор (частный http: HttpClient) {}
}

3), отправить запрос

 импортировать { HttpClient } из "@angular/common/http"

класс экспорта AppComponent реализует OnInit {
конструктор (частный http: HttpClient) {}
ngOnInit() {
this.getUsers().subscribe(console.log)
}
getUsers() {
верните это.http.get("https://jsonplaceholder.typicode.com/users")
}
}

2. Метод запроса

 this.http.get(url [, параметры]);
this.http.post(url, data [, options]);
this.http.delete(url [, параметры]);
this.http.put(url, данные [, параметры]);

 this.http.get<Post[]>('/getAllPosts')
.subscribe(ответ => console.log(ответ))

3. Параметры запроса

1. Класс HttpParams

 экспорт объявить класс HttpParams {
конструктор (опции?: HttpParamsOptions);
has(param: string): логическое значение;
get(param: string): строка null;
getAll (параметр: строка): строка [] ноль;
ключи(): строка[];
добавление (параметр: строка, значение: строка): HttpParams;
set(param: string, value: string): HttpParams;
delete (параметр: строка, значение?: строка): HttpParams;
toString(): строка;
}

2. Интерфейс HttpParamsOptions.

 объявить интерфейс HttpParamsOptions {
fromString?: строка;
изОбъекта?: {
[параметр: строка]: строка | ReadonlyArray<строка>;
};
кодер?: HttpParameterCodec;
}

3. Примеры использования

 импортировать { HttpParams } из @angular/common/http;

let params = new HttpParams({ fromObject: {name: "zhangsan", age: "20"}})
params = params.append("секс", "мужской")
let params = new HttpParams({fromString: "name=zhangsan&age=20"})

4. Заголовок запроса

Для создания полей заголовка запроса требуется использование класса HttpHeaders. Существуют различные методы управления заголовками запросов в объекте экземпляра класса.

 экспорт объявить класс HttpHeaders {
конструктор(заголовки?: строка | {
[имя: строка]: строка | строка[];
});
has(name: string): логическое значение;
получить (имя: строка): строка ноль;
ключи(): строка[];
getAll (имя: строка): строка [] ноль;
Append(имя: строка, значение: строка | строка[]): HttpHeaders;
set(имя: строка, значение: строка | строка[]): HttpHeaders;
delete (имя: строка, значение?: строка | строка []): HttpHeaders;
}

 let headers = new HttpHeaders({test: "Hello" })

5. Содержание ответа

 объявить тип HttpObserve = «тело» |
// ответ считывает все тело ответа // тело считывает данные, возвращенные сервером

 это.http.get(
"https://jsonplaceholder.typicode.com/users",
{ обратите внимание: "тело" }
).subscribe(console.log)

6. Перехватчик

Перехватчики — это способ глобального захвата и изменения HTTP-запросов и ответов в приложениях Angular. (Токен, Ошибка)

Перехватчик будет перехватывать только запросы, сделанные с использованием модуля HttpClientModule.

ng g interceptor <name>

6.1 Перехват запроса

 @Инъекционный()
класс экспорта AuthInterceptor реализует HttpInterceptor {
конструктор() {}
	//Метод перехвата intercept(
//unknown указывает тип тела запроса (body) request: HttpRequest<unknown>,
следующий: HttpHandler
// неизвестное указывает тип содержимого ответа (тело)): Observable<HttpEvent<unknown>> {
// Клонируем и изменяем заголовок запроса const req = request.clone({
setHeaders: {
Авторизация: «На предъявителя xxxxxxx».
}
})
// Передаем измененный заголовок запроса обратно в приложение через функцию обратного вызова return next.handle(req)
}
}

6.2 Перехват ответа

 @Инъекционный()
класс экспорта AuthInterceptor реализует HttpInterceptor {
конструктор() {}
	//Метод перехвата intercept(
запрос: HttpRequest<неизвестно>,
следующий: HttpHandler
): Observable<любой> {
вернуть следующий.handle(запрос).pipe(
повторить попытку(2),
catchError((ошибка: HttpErrorResponse) => throwError(ошибка))
)
}
}

6.3 Внедрение перехватчика

 импортировать { AuthInterceptor } из "./auth.interceptor"
импортировать { HTTP_INTERCEPTORS } из "@angular/common/http"

@NgModule({
провайдеры: [
{
предоставить: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
мульти: правда
}
]
})

7. Угловой прокси

1. Создайте файл proxy.conf.json в корневом каталоге проекта и добавьте следующий код.

 {
"/api/*": {
"target": "http://localhost:3070",
«безопасный»: ложь,
«changeOrigin»: правда
}
}

• /api/*: запросы, начинающиеся с /api, сделанные в приложении, проходят через этот прокси.

• цель: URL-адрес на стороне сервера

• безопасный: если протокол URL-адреса на стороне сервера — https, этот элемент должен иметь значение true.

• ChangeOrigin: если сервер не является локальным, этот элемент должен иметь значение true.

2. Укажите файл конфигурации прокси (способ 1).

 "скрипты": {
"start": "ng submit --proxy-config proxy.conf.json",
}

3. Укажите файл конфигурации прокси (способ 2)

 "служить": {
"параметры": {
"proxyConfig": "proxy.conf.json"
}, 

Этот модуль используется для отправки Http запросов, а методы, используемые для отправки запросов, возвращают объекты Observable .