angular利用http实现get和post哀求

阐明：
angular利用http实现get和post哀求
提示：在运行本项现在，请先导入路由router，可以参考我上一篇文章。
结果图：

step1:E:\projectgood\ajsix\untitled4\package.json
“@angular/cdk”: “^18.2.10”,
“@angular/material”: “^18.2.10”,
step2:E:\projectgood\ajsix\untitled4\src\app\model\Service.ts

2. import { Injectable } from '@angular/core';
3. import { HttpClient } from '@angular/common/http';
4. import { Observable } from 'rxjs';
6. @Injectable()
7. export class Service {
8.   url = 'https://demo.restheart.org/messages';
10.   constructor(private http: HttpClient) {
11.   }
13.   public get(page: number = 1): Observable<Array<any>> {
14.     return this.http.get<Array<any>>(`${this.url}?pagesize=5&page=${page}`);
15.   }
17.   public size(): Observable<any> {
18.     return this.http.get(`${this.url}/_size`);
19.   }
21.   public delete(id: string): Observable<any> {
22.     return this.http.delete(`${this.url}/${id}`);
23.   }
25.   public getSingleCharacterz(id:string):Observable<any>{
26.     return this.http.get(`http://localhost:5000/api/water`)
27.   }
29.   public postSingleCharacterz(data: any): Observable<any> {
30.     const water =  {
31.       watername: '韩红牌纯净水',
32.       watericon: 'http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg',
33.       waterstyle: '最中幻想',
34.       watersize: '50L',
35.       waterprice: '32',
36.       shopaccount: '772024102801',
37.       shopname: '大润发超市'
38.     }
39.     return this.http.post(`http://localhost:5000/api/wateradd`, water);
40.   }
43.   public post(data: any): Observable<any> {
44.     const _data = {
45.       message: data.message,
46.       from: data.from
47.     };
49.     return this.http.post(this.url, _data);
50.   }
51. }

复制代码

step3:E:\projectgood\ajsix\untitled4\src\app\user\user.component.html

1. <p>user works!</p>
2. <button mat-flat-button color="primary" (click)="onAcceptClick('element.operate')">查询</button>
3. <button mat-flat-button color="primary" (click)="onAddClick('element.operate')">新增</button>

复制代码

step4:E:\projectgood\ajsix\untitled4\src\app\user\user.component.ts

1. import { Component, OnInit } from '@angular/core';
2. import { Observable, tap } from 'rxjs';
3. // import { Service } from './service';
4. import { FormsModule } from '@angular/forms';
5. import { AsyncPipe, JsonPipe, DatePipe } from '@angular/common';
6. import { HttpClient, HttpClientModule, HttpHandler } from '@angular/common/http';
8. import {Service} from '../model/Service';
9. import {MatButtonModule} from '@angular/material/button';
11. @Component({
12.   selector: 'app-user',
13.   standalone: true,
14.   imports: [FormsModule,AsyncPipe,JsonPipe,DatePipe,HttpClientModule,MatButtonModule],
15.   templateUrl: './user.component.html',
16.   providers:[Service],
17.   styleUrl: './user.component.css'
18. })
19. export class UserComponent implements OnInit  {
21.   constructor(private service: Service) {}
24.   ngOnInit(): void {
25.   }
26.   onAcceptClick(key: string): void {
27.     console.log('you click onAcceptClick'+key)
30.     this.service.getSingleCharacterz('1').subscribe(
31.       (result:any)=>{
32.         console.log(result)
33.       },(error:any)=>{
34.         console.error('Error : '+error);
35.       }
36.     );
37.   }
40.   onAddClick(key: string): void {
41.     console.log('you click onAddClick' + key)
42.     this.service
43.       .postSingleCharacterz('1')
44.       .pipe(tap())
45.       .subscribe((resp) =>{
46.         console.log(resp)
47.       });
48.   }
50. }

复制代码

end

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。