web-dev-qa-db-ja.com

Angular2のHttp.DELETEリクエストの本文

Angular 2フロントエンドからややRESTfulなAPIと通信しようとしています。

コレクションから一部のアイテムを削除するには、削除する一意のID（URLに追加可能）に加えて、認証トークン、コレクション情報、補助データなどのデータを送信する必要があります。

私が見つけた最も簡単な方法は、リクエストヘッダーに認証トークンを入れ、本体に他のデータを入れることです。

ただし、Angular 2のHttpモジュールは、ボディを持つDELETEリクエストをまったく承認せず、このリクエストを実行しようとします

let headers= new Headers();
headers.append('access-token', token);

let body= JSON.stringify({
    target: targetId,
    subset: "fruits",
    reason: "rotten"
});

let options= new RequestOptions({headers:headers});
this.http.delete('http://testAPI:3000/stuff', body,options).subscribe((ok)=>{console.log(ok)}); <------line 67

このエラーを与える

app/services/test.service.ts(67,4): error TS2346: Supplied parameters do not match any signature of call target.

今、私は何か間違った構文をやっていますか？ RFCごとにDELETE本体がサポートされていると確信しています

そのデータを送信するより良い方法はありますか？

または、ヘッダーにダンプして1日だけ呼び出す必要がありますか？

この難問についての洞察をいただければ幸いです

angularresthttp-delete
46
TriTap

@ angular/httpからのhttp.jsでの定義：

delete（url、オプション）

リクエストは本文を受け付けないため、URI内のデータ以外の選択肢はないようです。

特に、RFCに対応する参照を含む別のトピックを見つけました。 ヘッダー以外のajax DELETEリクエストでデータを渡す方法

4
AndreasV

Http.delete（url、options）は本文を受け入れます。オプションオブジェクト内に配置するだけです。

http.delete('/api/something', new RequestOptions({
   headers: headers,
   body: anyObject
}))

参照オプションインターフェイス： https://angular.io/api/http/RequestOptions

更新：

上記のスニペットは、Angular 2.x、4.x、および5.xでのみ機能します。

バージョン6.xおよび7.xの場合、Angularは必要なものに対して異なるオーバーロードを提供します。ここですべてのオーバーロードを確認してください： https://angular.io/api/common/http/HttpClient#delete

const options = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
  }),
  body: {
    id: 1,
    name: 'test',
  },
};

this.httpClient
  .delete('http://localhost:8080/something', options)
  .subscribe((s) => {
    console.log(s);
  });
105
n4nd0_o

bodyメソッドを使用して、実際にAngular2 HTTPをだましてDELETEをrequestで送信することができます。こうやって：

let body = {
    target: targetId,
    subset: "fruits",
    reason: "rotten"
};

let options = new RequestOptionsArgs({ 
    body: body,
    method: RequestMethod.Delete
  });

this.http.request('http://testAPI:3000/stuff', options)
    .subscribe((ok)=>{console.log(ok)});

注：http.requestの代替の最初のパラメーターRequestOptionsArgsではなく、Requestで要求メソッドを設定する必要があります。何らかの理由で、http.deleteを使用した場合と同じ結果が得られる

これがお役に立てば幸いです。 angularの人たちはここでは間違っていると思う。

16
Hampus

Angular 5では、削除する代わりにrequestメソッドを使用して本文を送信する必要がありました。 deleteメソッドのドキュメントにはbodyは含まれていませんが、requestメソッドには含まれています。

import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';

this.http.request('DELETE', url, {
    headers: new HttpHeaders({
        'Content-Type': 'application/json',
    }),
    body: { foo: bar }
});
11
Jeff Cross

以下は、新しいHttpClientを使用したAngular 4/5に関連するコード例です。

import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';

public removeItem(item) {
    let options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
      }),
      body: item,
    };

    return this._http
      .delete('/api/menu-items', options)
      .map((response: Response) => response)
      .toPromise()
      .catch(this.handleError);
  }
7
Garrett Sanderson

Angular 6を使用する場合、http.requestメソッドにbodyを配置できます。

githubからの参照

あなたはこれを試すことができます、私にとってはうまくいきます。

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  constructor(
    private http: HttpClient
  ) {
    http.request('delete', url, {body: body}).subscribe();
  }
}
5
Druta Ruslan

以下はAngular 6の例です

deleteAccount(email) {
            const header: HttpHeaders = new HttpHeaders()
                .append('Content-Type', 'application/json; charset=UTF-8')
                .append('Authorization', 'Bearer ' + sessionStorage.getItem('accessToken'));
            const httpOptions = {
                headers: header,
                body: { Email: email }
            };
            return this.http.delete<any>(AppSettings.API_ENDPOINT + '/api/Account/DeleteAccount', httpOptions);
        }
5
unknow27

RESTは、DELETE要求で本文を含めることを妨げませんが、最も標準化されているため、クエリ文字列を使用することをお勧めします（データを暗号化する必要がない限り）

私はそれを次のようにしてangular 2で動作するようにしました：

let options:any = {}
option.header = new Headers({
    'header_name':'value'
});

options.search = new URLSearchParams();
options.search.set("query_string_key", "query_string_value");

this.http.delete("/your/url", options).subscribe(...)
1
mbryja

以下は、Angular 2/4/5プロジェクトに関連するコード例です。

let headers = new Headers({
  'Content-Type': 'application/json'
});

let options = new RequestOptions({
  headers: headers,
  body: {
    id: 123
  }
});

return this.http.delete("http//delete.example.com/delete", options)
  .map((response: Response) => {
    return response.json()
  })
  .catch(err => {
    return err;
  });

bodyがRequestOptionsを介して渡されることに注意してください。

0
student