Angular前端应用中HttpParams以json格式进行http多参数传递示例

这篇文章只介绍一点，就是angular应用中http多个请求参数操作方法；起初接触angular一直使用HttpParams进行参数设置，结果实际应用中遇到业务判断需要对其作以参数变动。

基础使用大家参考angular官方文档，根模块导入HttpClientModule,然后将HttpClient注入到应用里即可...

假如我们有一个文章列表页面，那么最基本的就是“添加文章”与“编辑文章”两个操作，一个接口，我们根据是否有ID判断添加还是编辑，如基础请求结构：

e.g.

_save() {
  const url = `/article/save`;
  const params = new HttpParams()
  .set('title', `${this._formData.title}`)
  .set('content', `${this._formData.title}`);
  this.http.post(url, params).subscribe(
    data => {
      // ...
    },
    error => {
      // ...
    }
  );
}

当然了，我们在写的过程中，肯定只写一个保存方法，在保存时判断添加还是编辑时，那么我们就会这样操作：

<button (click)="update('0')">保存</button>
<button (click)="update('1')">保存</button>
// 0:新增
// 1:编辑

update(t) {
  const params = new HttpParams()
  .set('title', `${this._formData.title}`)
  .set('content', `${this._formData.title}`);
  if (t === '0') {
    // console.log('add');
    params = new HttpParams()
    .set('title', `${this._formData.title}`)
    .set('content', `${this._formData.title}`);
  } else if (t === '1') {
    // console.log('edit');
    params = new HttpParams()
    .set('id', `${this._formData.id}`)
    .set('title', `${this._formData.title}`)
    .set('content', `${this._formData.title}`);
  }
}

_save(params) {
  const url = `/article/save`;
  this.http.post(url, params).subscribe(
    data => {
      // ...
    },
    error => {
      // ...
    }
  );
}

这样，也可以操作，但如果参数过多，或业务逻辑复杂，则不适合了；有没有和jquery那种Ajax一样的，传入一个json对象即可？

当然是有，只是一直没看这里的接口，这里开始，上面的都已经是废话了，就是直接在HttpParams中构造一个json数据进去（HttpParamsOptions）。

let params = {
  id: '',
  title: this.title,
  content: this.content
};

new HttpParams({fromObject: params});

就是这个new HttpParams({fromObject: params})；

这样，我们就可以方便根据业务逻辑判断对其参数作以操作（什么情况添加id，什么情况下删除id）。