Angular 5 Http api请求在chrome dev工具中获得响应,但不会返回

时间:2018-03-22 10:23:41

标签: angular http http-headers

我有一个"响应"内容:

enter image description here

但是我无法控制它。记录它。

更新(15:00 22/03/2018,这是新版本):

在actions.component.ts中:

 generatePOR(){
    this._api.exportToERP(this.selection).subscribe((res) => {
      console.log('heelo I am second phase');
      console.log(res);
    }, (error) => console.log(error), () => {});
  }

在api.ts中:

generatePOR (idList): any {
  const apiURL = `${this.API_URL}/purchaseorders/generatePOR`;
  return this._http.post(apiURL, idList, { headers: new HttpHeaders().set('Content-Type', 'application/json') });
}

这是控制台日志:

ro {headers: Ge, status: 200, statusText: "OK", url: "http://localhost:8080/purchaseorders/generatePOR", ok: false, …}error: {error: SyntaxError: Unexpected token P in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttp…, text: "PARTNER_RELATION_CUSTOMER_GROUPCODE;PARTNER_RELATI…95;2;NEW ORDER PUBLISHED;;;2017-10-289 08:00:00
↵"}headers: Ge {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}message: "Http failure during parsing for http://localhost:8080/purchaseorders/generatePOR"name: "HttpErrorResponse"ok: falsestatus: 200statusText: "OK"url: "http://localhost:8080/purchaseorders/generatePOR"__proto__: eo

更新(16:31):

generatePOR (idList): any {
    const apiURL = `${this.API_URL}/purchaseorders/generatePOR`;
    this.PORresult = this._http.post(apiURL, idList, {
      observe: 'response',
      headers: new HttpHeaders({'Content-Type': 'application/json'}),
      responseType: 'text' as 'text'
    })
      .map((res, i) => {
        console.log('hi');
        console.log(res);
      });
    return this.PORresult;
  }

输出:

hi  
ao {headers: Ge, status: 200, statusText: "OK", url: "http://localhost:8080/purchaseorders/generatePOR", ok: true, …}body: "PARTNER_RELATION_CUSTOMER_GROUPCODE;PARTNER_RELATION_CUSTOMER_PLANTCODE;PO_UpdateVersion;PARTNER_RELATION_SUPPLIER_NOLOCAL;PO_PoNumber;PO_PosNumber;PO_RequestNumber;PARTNER_RELATION_SUPPLIER_NO;PO_CollabPrice;PO_CollabPromQty;PO_Status;PO_SupAckNumber;PO_CollabComment;PO_CollabPromDate
↵PARTNER_RELATION_CUSTOMER_GROUPCODE;PARTNER_RELATION_CUSTOMER_PLANTCODE;1;PARTNER_RELATION_SUPPLIER_NOLOCAL;4500634818;00070;0001;PARTNER_RELATION_SUPPLIER_NO;464.95;2;NEW ORDER PUBLISHED;;;2017-10-289 08:00:00
↵"headers: Ge {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}ok: truestatus: 200statusText: "OK"type: 4url: "http://localhost:8080/purchaseorders/generatePOR"__proto__: eo

heelo I am second phase  undefined

3 个答案:

答案 0 :(得分:1)

使用.body获取回复的正文

if (res) {
      if (res.status === 201) {
        return [{ status: res.status, json: res.body }]
      }
      else if (res.status === 200) {
        console.log('hello, I am a result ',res);
        return [{ status: res.status, json: res.body }]
      }
    }

答案 1 :(得分:1)

你回归的方式在这里是错误的。

generatePOR (idList): Observable<any> {
const apiURL = `${this.API_URL}/purchaseorders/generatePOR`;
return this._http.post(apiURL, idList, { observe: 'response' }, )
  .map((res: HttpResponse<any>, i) => {
    if (res) {
      if (res.status === 201) {
        return [{ status: res.status, json: res }]
      }
      else if (res.status === 200) {
        console.log('hello, I am a result ',res);
        return [{ status: res.status, json: res }]
      }
    }
  })
  .catch((error: any) => {
    if (error.status < 400 ||  error.status ===500) {
      return Observable.throw(new Error(error.status));
    }
  })
  .pipe(
    catchError(this.handleError)
  );

}

不要返回this.results,直接返回promise。因为api可能需要时间。但在此之前,您将返回结果对象。这就是你没有得到这些数据的原因。

答案 2 :(得分:0)

经过一天半的劳动,这对我有用:

actions.component.ts:

generatePOR(){
  this._api.generatePOR(this.selection).subscribe(res => {
    if(res !== null && res !== undefined){
      console.log(res.body);
    }
  }, (error) => console.log(error), () => {});
}

api.ts:

generatePOR(idList): any {
  const apiURL = `${this.API_URL}/purchaseorders/generatePOR`;
  this.PORresult = this._http.post(apiURL, idList, {
    observe: 'response',
    headers: new HttpHeaders({'Content-Type': 'application/json'}),
    responseType: 'text' as 'text'
  }).catch(this.handleError);
  return this.PORresult;
}

...并确保后端以text/csv格式发送实际文件,而不仅仅是粗暴html

这个github线程帮助创建了正确的标题和选项:https://github.com/angular/angular/issues/18586

注意:你必须使内联到api调用你不能事先在函数或类或应用程序的其他地方将它们声明为变量。 也是无意义的解析:responseType: 'text' as 'text'是使它成功的关键因素。