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

这篇文章由 DeathGhost 编辑,发布于

归类于 Angular » 👋分享到微博 当前评论 0 条。

大多数前端应用都需要通过 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)。

angular前端应用中HttpParams以json格式进行http多参数传递示例
angular前端应用中HttpParams以json格式进行http多参数传递示例
let params = {
  id: '',
  title: this.title,
  content: this.content
};

new HttpParams({fromObject: params});

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

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


angular angular2 angular6.x HttpParams http请求 HttpClient请求参数 HttpParams参数json形式 json数据 参数传递 参数配置

上一篇:

下一篇: