如何在Angular优雅编写HTTP请求

引言

基本上当下的应用都会分为前端与后端，固然这种前端定义不在限于桌面浏览器、手机、APP等设备。一个良好的后端会经过一套全部前端都通用的 RESTful API 序列接口做为先后端之间的通讯。

这其中对于身份认证都不可能再依赖传统的Session或Cookie；转而使用诸如OAuth二、JWT等这种更适合API接口的认证方式。固然本文并不讨论如何去构建它们。

1、API 设计

首先虽然并不会讨论身份认证的技术，但不论是OAuth2仍是JWT本质上身份认证都全靠一个 Token 来维持；所以，下面统一以 token 来表示身份认证所须要的值。

一套合理的API规则，会让前端编码更优雅。所以，但愿在编写Angular以前，能与后端相互达成一种“协议”也颇有必要。能够尝试从如下几点进行考虑。

版本号

能够在URL（例：https://demo.com/v1/）或Header（例：headers: { version: 'v1' }）中体现，相比较我更喜欢前者的直接。

业务节点

以一个节点来表示某个业务，好比：

• 商品 https://demo.com/v1/product/
• 商品SKU https://demo.com/v1/product/sku/

动做

由HTTP动词来表示：

• GET 请求一个商品 /product/${ID}
• POST 新建一个商品 /product
• PUT 修改一个商品 /product/${ID}
• DELETE 删除一个商品 /product/${ID}

统一响应

这一点很是重要，特别是当咱们新建一个商品时，商品的属性很是多，但若是咱们缺乏某个属性时。可使用这样的一种统一的响应格式：

{
    "code": 100, // 0 表示成功
    "errors": { // 错误明细
        "title": "商品名称必填"
    }
}

其中 code 无论成功与否都会有该属性。

状态码

后端响应一个请求是包括状态码和响应内容，而每一种状态码又包含着不一样的含义。

• 200 成功返回请求数据
• 401 无权限
• 404 无效资源

2、如何访问Http？

首先，须要导入 HttpClientModule 模块。

import { HttpClientModule } from '@angular/common/http';

@NgModule({
    imports: [
        HttpClientModule
    ]
})

而后，在组件类注入 HttpClient。

export class IndexComponent {
    constructor(private http: HttpClient) { }
}

最后，请求点击某个按钮发送一次GET请求。

user: Observable<User>;
getUser() {
    this.user = this.http.get<User>('/assets/data/user.json');
}

打印结果：

{{ user | async | json }}

三个简单的步骤，就是一个完整的HTTP请求步骤。

而后，现实与实际是有一些距离，好比说身份认证、错误处理、状态码处理等问题，在上面并没有任何体现。

可，上面已经足够优雅，要让我破坏这种优雅那么此文就变得无心义了！

所以……

3、拦截器

一、HttpInterceptor 接口

正如其名，咱们在不改变上面应用层面的代码下，容许咱们把身份认证、错误处理、状态码处理问题给解决了！

写一个拦截器也是很是的优雅，只须要实现 HttpInterceptor 接口便可，并且只有一个 intercept 方法。

@Injectable()
export class JWTInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
        // doing
    }

}

intercept 方法有两个参数，它几乎所当下流行的中间件概念通常，req 表示当前请求数据（包括：url、参数、header等），next 表示调用下一个“中间件”。

二、身份认证

req 有一个 clone 方法，容许对当前的请求参数进行克隆而且这一过程会自行根据一些参数推导，无论如何用它来产生一个新的请求数据，并在这个新数据中加入咱们指望的数据，好比：token。

const jwtReq = req.clone({
    headers: req.headers.set('token', 'xxxxxxxxxxxxxxxxxxxxx')
});

固然，你能够再折腾更多请求前的一些配置。

最后，把新请求参数传递给下一个“中间件”。

return next.handle(jwtReq);

等等，都 return 了，说好的状态码、异常处理呢？

三、异常处理

仔细再瞧 next.handle 返回的是一个 Observable 类型。看到 Observable 咱们会想到什么？mergeMap、catch 等一大堆东西。

所以，咱们能够利用这些操做符来改变响应的值。

mergeMap

请求过程当中会会有一些过程状态，好比请求前、上传进度条、请求结束等，Angular在每一次这类动做中都会触次 next。所以，咱们只须要在返回 Observable 对象加上 mergeMap 来观察这些值的变动，这样有很是大的自由空间想象。

return next.handle(jwtReq).mergeMap((event: any) => {
        if (event instanceof HttpResponse && event.body.code !== 0) {
            return Observable.create(observer => observer.error(event));
        }
        return Observable.create(observer => observer.next(event));
    })

只会在请求成功才会返回一个 HttpResponse 类型，所以，咱们能够大胆判断是否来源于 HttpResponse 来表示HTTP请求已经成功。

这里，统一对业务层级的错误 code !== 0 产生一个错误信号的 Observable。反之，产生一个成功的信息。

catch

catch 来捕获非200之外的其余状态码的错误，好比：401。同时，前面的 mergeMap 所产生的错误信号，也会在这里被捕获到。

.catch((res: HttpResponse<any>) => {
    switch (res.status) {
        case 401:
            // 权限处理
            location.href = ''; // 从新登陆
            break;
        case 200:
            // 业务层级错误处理
            alert('业务错误：' + res.body.code);
            break;
        case 404:
            alert('API不存在');
            break;
    }
    return Observable.throw(res);
})

四、完整代码

至此，拦截器所要包括的身份认证token、统一响应处理、异常处理都解决了。

@Injectable()
export class JWTInterceptor implements HttpInterceptor {

    constructor(private notifySrv: NotifyService) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
        console.log('interceptor')
        const jwtReq = req.clone({
            headers: req.headers.set('token', 'asdf')
        });
        return next
            .handle(jwtReq)
            .mergeMap((event: any) => {
                if (event instanceof HttpResponse && event.body.code !== 0) {
                    return Observable.create(observer => observer.error(event));
                }
                return Observable.create(observer => observer.next(event));
            })
            .catch((res: HttpResponse<any>) => {
                switch (res.status) {
                    case 401:
                        // 权限处理
                        location.href = ''; // 从新登陆
                        break;
                    case 200:
                        // 业务层级错误处理
                        this.notifySrv.error('业务错误', `错误代码为：${res.body.code}`);
                        break;
                    case 404:
                        this.notifySrv.error('404', `API不存在`);
                        break;
                }
                // 以错误的形式结束本次请求
                return Observable.throw(res);
            })
    }
}

发现没有，咱们并无加一大堆并不认识的事物，单纯都只是对数据流的各类操做而已。

NotifyService 是一个无须依赖HTML模板、极简Angular通知组件。

五、注册拦截器

拦截器构建后，还须要将其注册至 HTTP_INTERCEPTORS 标识符中。

import { HttpClientModule } from '@angular/common/http';

@NgModule({
    imports: [
        HttpClientModule
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: JWTInterceptor, multi: true}
    ]
})

以上是拦截器的全部内容，在不改变原有的代码的状况下，咱们只是利用短短几行的代码实现了身份认证所须要的TOKEN、业务级统一响应处理、错误处理动做。

4、async 管道

一个 Observable 必须被订阅之后才会真正的开始动做，前面在HTML模板中咱们利用了 async 管道简化了这种订阅过程。

{{ user | async | json }}

它至关于：

let user: User;
get() {
    this.http.get<User>('/assets/data/user.json').subscribe(res => {
        this.user = res;
    });
}

{{ user | json }}

然而，async 这种简化，并不表明失去某些自由度，好比说当在获取数据过程当中显示【加载中……】，怎么办？

<div *ngIf="user | async as user; else loading">
    {{ user | json }}
</div>
<ng-template #loading>加载中……</ng-template>

恩！

5、结论

Angular在HTTP请求过程当中使用 Observable 异步数据流控制数据，而利用 rxjs 提供的大量操做符，来改变最终值；从而得到在应用层面最优雅的编码风格。

当咱们说到优雅使用HTTP这件事时，易测试是一个很是重要，所以，我建议将HTTP从组件类中剥离并将全部请求放到 Service 当中。当对某个组件编写测试代码时，若是受到HTTP请求结果的限制会让测试更困难。

Happy coding!