[英]Body of Http.DELETE request in Angular2
我正在尝试从 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 正文
有没有更好的方法来发送这些数据?
还是我应该将其转储到标题中并收工?
对此难题的任何见解将不胜感激
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 以后的版本,Angular 提供了 15 种不同的重载。 在此处检查所有重载: 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);
});
如果您使用 Angular 6,我们可以将 body 放入http.request
方法中。
你可以试试这个,对我来说它有效。
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();
}
}
在 Angular 5 中,我必须使用request
方法而不是delete
来发送正文。 delete
方法的文档不包括body
,但它包含在 request 方法中。
import { HttpClient, HttpHeaders } from '@angular/common/http';
this.http.request('DELETE', url, {
headers: new HttpHeaders({
'Content-Type': 'application/json',
}),
body: { foo: bar }
});
实际上,您可以使用request
方法欺骗Angular2 HTTP
发送带有DELETE
的body
。 这是如何:
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)});
请注意,您必须在RequestOptionsArgs
中设置请求方法,而不是在http.request
的替代第一个参数Request
中。 由于某种原因,这会产生与使用http.delete
相同的结果
我希望这会有所帮助,而且我不会迟到。 我认为有角的人在这里不允许通过删除传递身体是错误的,即使不鼓励这样做。
下面是带有新 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);
}
对于 Angular 10,您还可以使用通用请求格式和 DELETE 方法:
http.request('DELETE', path, {
body:body,
headers: httpHeaders,
params: ((params != null) ? params : new HttpParams())
})
以下是 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);
}
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(...)
以下是 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
传递的
在 Angular Http 7 中,DELETE 方法接受作为第二个参数options
对象,您可以在其中提供请求参数作为params
对象以及headers
对象。 这与 Angular6 不同。
参见示例:
this.httpClient.delete('https://api-url', {
headers: {},
params: {
'param1': paramValue1,
'param2': paramValue2
}
});
deleteInsurance(insuranceId: any) {
const insuranceData = {
id : insuranceId
}
var reqHeader = new HttpHeaders({
"Content-Type": "application/json",
});
const httpOptions = {
headers: reqHeader,
body: insuranceData,
};
return this.http.delete<any>(this.url + "users/insurance", httpOptions);
}
在 Angular 13 中,这对我很有效:
const options = {
headers: this._headers,
body: JSON.stringify(user)
};
return this._http.delete<DeleteVirtualAssistantResult>(`${this._apiUrl}/users`, options);
由于弃用RequestOptions ,因此不支持在 DELETE 请求中将数据作为正文发送。
如果您查看DELETE的定义,它看起来像这样:
delete<T>(url: string, options?: {
headers?: HttpHeaders | {
[header: string]: string | string[];
};
observe?: 'body';
params?: HttpParams | {
[param: string]: string | string[];
};
reportProgress?: boolean;
responseType?: 'json';
withCredentials?: boolean;
}): Observable<T>;
您可以将有效负载与 DELETE 请求一起作为选项对象中参数的一部分发送,如下所示:
this.http.delete('http://testAPI:3000/stuff', { params: {
data: yourData
}).subscribe((data)=>.
{console.log(data)});
但是,请注意 params 只接受字符串或string[]形式的数据,因此除非将其字符串化,否则您将无法发送自己的接口数据。
@angular/http在 http.js 中的定义:
删除(网址,选项)
该请求不接受正文,因此您唯一的选择似乎是 URI 中的数据。
我发现了另一个主题,其中引用了对应的 RFC,其中包括: 如何在 ajax DELETE 请求中传递数据而不是标头
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.