标签：uri nim mock status cal file client set comment
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular0629": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss" 改这个
}
},
ng g i xxx
ng g interceptor xxxx
import { Injectable } from ‘@angular/core‘;
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor
} from ‘@angular/common/http‘;
import { Observable } from ‘rxjs‘;
@Injectable()
export class ApiInjectorInterceptor implements HttpInterceptor {
constructor() {}
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
console.log(request);
return next.handle(request);
}
}
注册拦截器
app模块
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
BrowserAnimationsModule,
],
declarations: [
AppComponent,
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: ApiInjectorInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
如果多个可以这样写
app.mudule.ts
import { httpInterceptorProviders } from "./interceptors";
---
providers: [httpInterceptorProviders],
interceptors/index.ts
import { ConvertInterceptor } from ‘./convert.interceptor‘;
export const httpInterceptorProviders = [
{ provide: HTTP_INTERCEPTORS, useClass: NotifyInterceptor, multi: true }
];
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
const httpsReq = request.clone({
url: request.url.replace("https://", "http://")
});
return next.handle(httpsReq);
}
export class OneComponent{
constructor(private http:HttpClient) {
}
clicks() {
const url = ‘https://jsonplaceholder.typicode.com/comments‘;
this.http.get(url).subscribe(res=>{
console.log(res);
})
}
}
或者package.json中
ng serve --ssl
服务使用https请求
req.clone({
url: ‘xxxxx‘ + request.url
});
或者package.json中
ng server --base-href xxxxx
const loaderService = this.injector.get(LoaderService);
loaderService.show();
return next.handle(req).pipe(
delay(5000),// 模拟延迟5s,开发时候去掉
finalize(() => loaderService.hide())
// finalize 完成或者错误时调用一个函数
);
创建加载器服务
services/loader.service.ts
export class LoaderService {
public isLoading = new BehaviorSubject(false);
constructor() { }
}
interceptors/loader-interceptor.service.ts
import { Injectable } from ‘@angular/core‘;
import {
HttpResponse,
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor
} from ‘@angular/common/http‘;
import { Observable } from ‘rxjs‘;
import { LoaderService } from ‘../services/loader.service‘;
@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
private requests: HttpRequest<any>[] = [];
constructor(private loaderService: LoaderService) { }
// 删除加载了的请求
removeRequest(req: HttpRequest<any>) {
const i = this.requests.indexOf(req);
if (i >= 0) {
this.requests.splice(i, 1);
}
this.loaderService.isLoading.next(this.requests.length > 0);
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// 添加加载的请求到数组中
this.requests.push(req);
console.log("No of requests--->" + this.requests.length);
this.loaderService.isLoading.next(true);
return new Observable(observer => {
const subscription = next.handle(req)
.subscribe(
event => {
if (event instanceof HttpResponse) {
this.removeRequest(req);
observer.next(event);
}
},
err => {
alert(‘error‘ + err);
this.removeRequest(req);
observer.error(err);
},
() => {
this.removeRequest(req);
observer.complete();
});
// 取消请求时,从队列中删除请求
return () => {
this.removeRequest(req);
subscription.unsubscribe();
};
});
}
}
我们通过请求队列的长度,想loaderService发送true/false
在组件中使用
my-loader.component.html
<div class="progress-loader" [hidden]="!loading">
加载中
</div>
my-loader.component.ts
export class MyLoaderComponent implements OnInit {
loading: boolean;
constructor(private loaderService: LoaderService) {
this.loaderService.isLoading.subscribe((v) => {
this.loading = v;
});
}
ngOnInit() {
}
}
最后记得在所需要的模块中加上
providers: [
LoaderService,
{ provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true }
],
我们知道后代有时候传一些属性,我们可以把属性重名名
{
"Title":‘MR‘,
"Name":"cool cat",
"Id":1
}
改成
{
"title":‘MR‘,
"name":"cool cat",
"id":1
}
我先写一个简单版,复杂版其实也类似,就是拿到属性进行修改
可以用 lodash的camelCase进行修改
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
return next.handle(request).pipe(
map((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
// 返回的内容
let camelCaseObject = Object.entries(event.body).reduce((acc, [key, val]) => {
acc.push([key.toLocaleLowerCase(), val]);
return acc;
}, []);
console.log(camelCaseObject);
const modEvent = event.clone({body: Object.fromEntries(camelCaseObject)});
return modEvent;
}
})
);
}
const modified = req.clone({
setHeaders: { "X-Man": "Wolverine" }
});
return next.handle(modified);
return next.handle(req).pipe(
tap((event: HttpEvent<any>) => {
if (event instanceof HttpResponse && event.status === 201) {
// 提示下,拿到201的标识码啦
this.toastr.success("Object created.");
}
})
);
next.handle(request).pipe(
catchError((error: HttpErrorResponse) => {
if (error.status !== 401) {
console.log(‘冒泡‘);
}
return throwError(error);
})
);
req.method===‘GET‘ // 拿到get请求
//interceptor 里面
if(request.url===‘/getList‘){
const body = { firstName: "Mock", lastName: "Faker" };
return of(new HttpResponse({ status: 200, body: body }));
}
发的请求
const url=‘/getList‘;
this.http.get(url).subscribe(res=>{
console.log(res);
})
export class ApiInjectorInterceptor implements HttpInterceptor {
private cache = new Map<string, any>();
constructor() {
}
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
// 如果不是get请求直接返回
if (request.method !== ‘GET‘) {
return next.handle(request);
}
const cacheRes = this.cache.get(request.url);
// 第一次没值
if (cacheRes) {
return of(cacheRes);
}
return next.handle(request).pipe(
tap(event => {
if (event instanceof HttpRequest) {
this.cache.set(request.url, event);
}
})
);
}
}
this.http.post(‘api/s01cross/b04/exportmonfinana‘, paramMap,
{responseType: ‘blob‘, observe: ‘response‘}).subscribe(data => {
const link = document.createElement(‘a‘);
const blob = new Blob([data.body], {type: ‘application/vnd.ms-excel‘});
let fileName = data.headers.get(‘Content-Disposition‘).split(‘;‘)[1].split(‘filename=‘)[1];
const fileNameUnicode = data.headers.get(‘Content-Disposition‘).split(‘filename*=‘)[1];
// 当存在 filename* 时，取filename* 并进行解码（为了解决中文乱码问题）
if (fileNameUnicode) {
fileName = decodeURIComponent(fileNameUnicode.split(‘\‘\‘‘)[1]);
}
link.setAttribute(‘href‘, window.URL.createObjectURL(blob));
link.setAttribute(‘download‘, fileName);
link.style.visibility = ‘hidden‘;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
标签：uri nim mock status cal file client set comment
原文地址：https://www.cnblogs.com/fangdongdemao/p/13254052.html
