DeathGhost

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

这篇文章发布于 2018年09月11日 23:25 星期二 阅读 899 次,评论 0 条

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 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

用户评论(当前评论共计0条)

⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋

视觉前端爱好者

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

4

目录

33

文章

14

评论

世界品牌·洛川红富士

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

💕与君共勉💕