DeathGhost

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

这篇文章发布于2018年09月11日 23:25 星期二。 阅读 87 次 ,由 DeathGhost 编辑,归类于angular »

大多数前端应用都需要通过 HTTP 协议与后端服务器通讯。现代浏览器支持使用两种不同的 API 发起 HTTP 请求:XMLHttpRequest 接口和 fetch() API。HttpClient 类基于浏览器提供的 XMLHttpRequest 接口,为 angular 应用程序提供了一个简化的 api 来实现 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)。

DeathGhost

孙志锋

志于道,据于德,依于仁,游于艺。

deathghost@deathghost.cn


web前端设计与开发 - 与其说它是一门职业技术,不如将其视为一门艺术!


本站当前16 篇文章归于4个目录

阿里云ECS

🙏 点击,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕