web-dev-qa-db-ja.com

Angular 4.3 HttpClientを使用して投稿リクエストの本文に文字列を投稿する方法は？

Postリクエストの本文でファイルパス文字列を検索し、対応する画像を返す.net WebAPIがあります。新しいhttpClientを使用してAngular 4.3から文字列を正常に渡すのに苦労しています。それは可能ですか？エンドポイントが他のもので使用されているため、実際には「モデルの...文字列だけなので、基本的には複製できますが、可能であればjsonを渡します。

WebAPIメソッドシグネチャ：

public HttpResponseMessage ImagesFromPaths(HttpRequestMessage request, [FromBody] string path)

現在のサービス方法：

getImage(path: string): Observable<any> {

  return this.http.post(
    `${apiUrl}`,
    { path },
    { headers: new HttpHeaders({
      'Content-Type': 'application/json',
    }), responseType: 'blob',
  })
}

簡単に達成できるものになりましたか？

angularangular4-httpclient
15
user3302396

あなたのコードには、ほとんどすべてが良いです。主な問題はContent-Typeヘッダーです。 .NETアノテーションを使用して[FromBody] REST AP​​Iに文字列を送信し、application/jsonヘッダー値を使用する場合は、たとえば、パスパラメータに""を追加する必要があります。 "test_value"：

return this.http.post(
  `${apiUrl}`,
    `\"${path}\"` ,
  { headers: new HttpHeaders({
    'Content-Type': 'application/json',
  }), responseType: 'blob',
  })

x-www-form-urlencodedヘッダー値を使用することもできます。次に、そのようにボディをリクエストするためにパラメータを渡す必要があります：

return this.http.post(
  `${apiUrl}`,
    `=${path}` ,
  { headers: new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded',
  }), responseType: 'blob',
  })
22
matejko219

[fromBody]属性を削除すると、pathからqueryを取得できます

public HttpResponseMessage ImagesFromPaths(HttpRequestMessage request, string path)

postリクエスト${apiUrl}/${path}のポスト送信パス：

return this.http.post(
  `${apiUrl}/${path}`,
  { headers: new HttpHeaders({
    'Content-Type': 'application/json',
  }), responseType: 'blob',
  })
5
Yerkon

このオプションで別の代替方法を試し、文字列パスJsonをpostメソッドの本体に送信するように指示しました。

 getImage(path: string) {
            let headers = new Headers({ 'Content-Type': 'application/json' });
            let options = new RequestOptions({ headers: headers });

            return new Promise((resolve, reject) => {
                this.http.post('${apiUrl}',path, options)
                .map((res) => res.json()).share()
                .subscribe(res => {
                  resolve(res)
                }, (err) => {
                  reject(err);
                });
            });
          }

うまくいけば幸いです。ありがとう

0
this_is_om_vm