解决Ionic5/Angular8项目中使用Angular的HttpClient发送post请求无效的问题

左手的ㄟ右手 2023-07-23 03:59 21阅读 0赞

### 解决Ionic5/Angular8项目中使用Angular的HttpClient.post请求无效的问题 ###

直接上解决思路  
1、java服务端接口的写法

@Description("获取计划执行监控总体数据列表")
    	@POST
    	@Path("/getPlanExecMonitorTotalData")
    	@Produces(MediaType.APPLICATION_JSON)
    	public String getPlanExecMonitorTotalData(
    			@FormParam("dsType") @DefaultValue("demoDs") String dsType,
    			@FormParam("planDate") String planDate,
    			@FormParam("equipGroupId") String equipGroupId,
    			@FormParam("equipJson") String equipJson) { 
    		
    	}

POST请求接口的java服务端要点

> 关键点1：在接口方法上添加注解@Produces(MediaType.APPLICATION\_JSON)。  
> 关键点2：方法参数添加注解@FormParam。

2、前端写法

import {  Injectable } from '@angular/core';
    import {  HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
    import {  EnvService } from '../../wongoing/env.service';
    import {  UtilsService } from '../../wongoing/utils.service';
    
    @Injectable({ 
      providedIn: 'root'
    })
    export class JihuaService { 
    
      constructor(private http: HttpClient, private env: EnvService, private utilsService: UtilsService) {  }
    
      /** * 获取计划执行监控总体数据列表 * @param planDate 计划日期 * @param equipGroupId 生产区域ID * @param equipJson 机台列表json串[{equipCode:'', equipName:''}, {equipCode:'', equipName:''}] */
      public getPlanExecMonitorTotalData(planDate, equipGroupId, equipJson) { 
        const url = this.env.getPlanExecMonitorTotalData;
        const method = 'POST';
        const dsType = this.utilsService.getDataSourceType();
        const usedLanguage = this.utilsService.getUsedLanguage();
        let body = new HttpParams();
        body = body.append('dsType', dsType);
        body = body.append('planDate', planDate);
        body = body.append('equipGroupId', equipGroupId);
        body = body.append('equipJson', equipJson);
        const options = {  headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded') };
        // const options = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }; // 效果等同上一句
        return this.http.post(url, body.toString(), options).toPromise();
      }
    }

> 关键点1：this.http.post的第二个参数body的格式必须是param1=value1&param2=value2这种格式，因此在此处使用了HttpParams对象的toString()方法把键值对参数转为这种字符串格式。  
> 关键点2：this.http.post的第三个参数要设置请求头Content-Type为application/x-www-urlencoded。

3、在postman中测试接口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center]

> 注意：实在Body的x-www-form-urlencoded中设置请求参数，而不是form-data中设置参数。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/73ee05650c0b4b4a901b0d59eabf116d.png