久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

# 代碼重構(gòu) 優(yōu)秀的項(xiàng)目一定是在不斷的重構(gòu)中成長(zhǎng)的。如果你不敢對(duì)某個(gè)歷史項(xiàng)目進(jìn)行重構(gòu)，那么原因只有兩個(gè)：你的編程習(xí)慣很糟糕或者歷史的項(xiàng)目很糟糕。 重構(gòu)的目的便是不造重復(fù)的輪子，反觀我們剛剛寫過(guò)的代碼，貌似后臺(tái)這個(gè)api地址的前綴寫的過(guò)于多了。。。稍微的數(shù)一數(shù)，這個(gè)地址好像已經(jīng)出現(xiàn)了10多次。也就是說(shuō)，在后臺(tái)請(qǐng)求API這個(gè)輪子的問題上，我們?cè)炝?0幾個(gè)相同的。這直接到來(lái)的問題便是：哪天后臺(tái)的小伙伴們心情不爽了，變更一次后臺(tái)的地址。比如由`http://angular.api.codedemo.club:81`變更為`https://angular.api.codedemo.club:81`，沒錯(cuò)，變更后的地址僅僅是多了一個(gè)`s`，而我們此時(shí)可能需要更改成百上千次。 對(duì)于懶人而言，這是不可以接受的。下面，我們通過(guò)創(chuàng)建攔截器方式來(lái)消除到這個(gè)重復(fù)的輪子。它的大體思路是這樣：  以新建班級(jí)接口為例：  使用攔截器可以輕松的做到這一點(diǎn)： ### api前綴攔截器 我們?cè)趕rc/app文件夾中建立api攔截器: ```bash panjie@panjies-Mac-Pro app % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app panjie@panjies-Mac-Pro app % ng g interceptor api CREATE src/app/api.interceptor.spec.ts (398 bytes) CREATE src/app/api.interceptor.ts (408 bytes) ``` 然后加入添加api請(qǐng)求地址的算法： ```typescript import {Injectable} from '@angular/core'; import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http'; import {Observable} from 'rxjs'; @Injectable() export class ApiInterceptor implements HttpInterceptor { private static api = 'http://angular.api.codedemo.club:81'; /** * 獲取帶有API前綴的URL. */ public static getApiUrl(url: string): string { if (url.startsWith('/')) { // 如果以/打頭，比如 /clazz，則直接拼接為：http://angular.api.codedemo.club:81/clazz return this.api + url; } else { // 如果不以/打頭，比如clazz，則接拼的時(shí)候加入/ return this.api + '/' + url; } } constructor() { } intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> { // 獲取帶有前綴的url const url = ApiInterceptor.getApiUrl(request.url); // 克隆一個(gè)req出來(lái)，原因見xAuthToken攔截器 const req = request.clone({url}); // 轉(zhuǎn)發(fā)到下一個(gè) return next.handle(req); } } ``` 在上述代碼中，我們剝離出了一個(gè)`getApiUrl`方法，這樣做可以非常友好的支持單元測(cè)試，因?yàn)槲覀兛梢允褂靡韵麓a來(lái)驗(yàn)證剛剛書寫的邏輯代碼是否正確。如果我們將添加前綴的代碼添加到`intercept(request: HttpRequest<unknown>, next: HttpHandler)`方法中話，我相信你一定不知道該怎么對(duì)其進(jìn)行測(cè)試（當(dāng)然了，我也不會(huì)）。 ```typescript +++ b/first-app/src/app/api.interceptor.spec.ts @@ -13,4 +13,11 @@ describe('ApiInterceptor', () => { const interceptor: ApiInterceptor = TestBed.inject(ApiInterceptor); expect(interceptor).toBeTruthy(); }); + + fit('getApiUrl', () => { + expect(ApiInterceptor.getApiUrl('clazz')) + .toEqual('http://angular.api.codedemo.club:81/clazz'); + expect(ApiInterceptor.getApiUrl('/clazz')) + .toEqual('http://angular.api.codedemo.club:81/clazz'); + }); }); ```  ## 應(yīng)用攔截器 我們先將其應(yīng)用到班級(jí)新組件中，由于使用了攔截器來(lái)添加請(qǐng)求的后臺(tái)前綴，所以在組件中應(yīng)該刪除相關(guān)的前綴： ### 移除組件中的http前綴 ```typescript +++ b/first-app/src/app/clazz/add/add.component.ts @@ -7,7 +7,7 @@ import {HttpClient} from '@angular/common/http'; styleUrls: ['./add.component.css'] }) export class AddComponent implements OnInit { - private url = 'http://angular.api.codedemo.club:81/clazz'; + private url = 'clazz'; clazz = { name: '', teacherId: null as unknown as number ``` 此時(shí)，測(cè)試`add.component.spec.ts`文件（注意并不是add.component.mock-api.spec.ts），則將在控制臺(tái)中得到一個(gè)錯(cuò)誤：  這是由于此時(shí)新的攔截器并沒有被配置生效，所以組件中的請(qǐng)求地址`clazz`被作為相對(duì)地址處理了。 ### 添加攔截器 若要使攔截器生效，則需要將其添加到模塊中。我們?cè)诖藢⑵涮砑拥絼?dòng)態(tài)測(cè)試模塊中： ```typescript +++ b/first-app/src/app/clazz/add/add.component.spec.ts @@ -4,6 +4,7 @@ import {AddComponent} from './add.component'; import {FormsModule} from '@angular/forms'; import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule, HttpHeaders} from '@angular/common/http'; import {XAuthTokenInterceptor} from '../../x-auth-token.interceptor'; +import {ApiInterceptor} from '../../api.interceptor'; describe('AddComponent', () => { let component: AddComponent; @@ -15,7 +16,8 @@ describe('AddComponent', () => { imports: [FormsModule, HttpClientModule], // 加入自定義的XAuthTokenInterceptor，讓其自動(dòng)為我們處理認(rèn)證的header providers: [ - {provide: HTTP_INTERCEPTORS, multi: true, useClass: XAuthTokenInterceptor} + {provide: HTTP_INTERCEPTORS, multi: true, useClass: XAuthTokenInterceptor}, + {provide: HTTP_INTERCEPTORS, multi: true, useClass: ApiInterceptor} ] }) .compileComponents(); ``` 在前面的章節(jié)中我們講過(guò)可以為一個(gè)Angular模塊添加多個(gè)攔截器，在添加攔截器時(shí)的關(guān)鍵字：`multi: true`的含義便是如此。 接下來(lái)繼續(xù)刪除測(cè)試代碼中關(guān)于登錄的前綴： ```typescript +++ b/first-app/src/app/clazz/add/add.component.spec.ts @@ -44,7 +44,7 @@ describe('AddComponent', () => { const authString = 'zhangsan:codedemo.club'; const authToken = btoa(authString); const httpHeaders = new HttpHeaders().append('Authorization', 'Basic ' + authToken); - httpClient.get('http://angular.api.codedemo.club:81/teacher/login', {headers: httpHeaders}) + httpClient.get('/teacher/login', {headers: httpHeaders}) .subscribe(() => { // 登錄成功后，再新建班級(jí)，然后就不報(bào)401未認(rèn)證的異常了 component.clazz = { ``` 測(cè)試結(jié)果如下：  ## 再談單元測(cè)試 我們說(shuō)單元測(cè)試的根本目的在于保障被測(cè)組件的功能正常。從另一個(gè)層面上講，如果一個(gè)組件的功能發(fā)生了變更，則歷史的單元測(cè)試應(yīng)該隨即失效才對(duì)。而我們剛剛在班級(jí)新增組件上移除了API前綴，但跑一下全局測(cè)試，卻發(fā)現(xiàn)所有的單元測(cè)試都被測(cè)試通過(guò)了，竟然沒有一個(gè)單元測(cè)試是失效的。 做為保障班級(jí)新增組件的單元測(cè)試文件`add.component.mock-api.spec.ts`，在被測(cè)試組件變更了API地址后，單元測(cè)試卻仍然通過(guò)了，這說(shuō)明此單元測(cè)試是失職的。糾其原因在于其單元測(cè)試代碼中，沒有任何的斷言： ```typescript it('在MockApi下完成組件測(cè)試Submit', () => { component.onSubmit(); }); ``` 若要保護(hù)某個(gè)組件的功能，則需要在單元測(cè)試中有適當(dāng)?shù)臄嘌?。比如?dāng)調(diào)用組件`component.onSubmit();`時(shí)，要么斷言其提交正常，要么斷言其提交異常。只有這樣，單元測(cè)試才可能是稱職的。 有人說(shuō)：我在控制臺(tái)中打印錯(cuò)誤了，看看不就可以了。而我想說(shuō)，在一個(gè)由成百上千的組件組成的項(xiàng)目中，沒有人有精力去看其它非負(fù)責(zé)組件在控制臺(tái)打印的報(bào)錯(cuò)信息。當(dāng)前`add.component.mock-api.spec.ts`報(bào)錯(cuò)如下：  這是由于組件的請(qǐng)求地址`clazz`與模擬API的地址`http://angular.api.codedemo.club:81/clazz`不相匹配造成的，解決的方法當(dāng)然也可以通過(guò)在當(dāng)前測(cè)試模塊中添加Ap攔截器的方式。另一種方式則是將模擬API的地址也變更為沒有前綴的`clazz`。這樣一來(lái)，組件與模似API便均可不關(guān)心具體后臺(tái)的請(qǐng)求地址前綴了。 ```typescript +++ b/first-app/src/app/clazz/add/add.component.mock-api.spec.ts @@ -41,7 +41,7 @@ class ClazzMockApi implements MockApiInterface { return [ { method: 'POST', - url: 'http://angular.api.codedemo.club:81/clazz', + url: 'clazz', result: { id: 1, name: '保存的班級(jí)名稱', ``` 此后，在MockApi以及ApiInterceptor的幫助下，我們前臺(tái)的組件開發(fā)階段便只需要關(guān)心與后臺(tái)關(guān)互的**規(guī)范**，而更少的關(guān)注真正地與后臺(tái)進(jìn)行交互了。而這的**規(guī)范**則被我們稱為**接口**，即`interface`。即API中的最后一個(gè)字符`I`的全稱。 ## 本節(jié)作業(yè) 當(dāng)前項(xiàng)目還存在眾多的重復(fù)輪子`http://angular.api.codedemo.club:81`，請(qǐng)嘗試修正它們。并使用`ng t`以及`ng s`分別對(duì)修正結(jié)果進(jìn)行驗(yàn)證。 | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.1.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.1.3.zip) |