angular学习7-HttpClient发送请求

最新推荐文章于 2023-06-17 19:33:01 发布

梁祖迅

最新推荐文章于 2023-06-17 19:33:01 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： angular

本文链接：https://blog.youkuaiyun.com/gexiaopipi/article/details/89181400

angular 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了Angular中使用HttpClient进行HTTP请求的方法，包括GET和POST两种方式。通过ng g service get命令创建服务，并展示了在组件中如何调用这些服务进行数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

get 请求

get.service.ts
ng g service get创建一个服务

//get.service.ts
const baseUrl = " https://www.easy-mock.com/mock/5cac9abdbf60940c8b889555/"
import {Injectable} from '@angular/core'
import {HttpClient} from '@angular/common/http'

@Injectable({
	provideIn:'root'
})
export class GetService {
	getSomething(){
		return this.http.get(baseUrl+'mock',{observer:'response'})	
	}
	constructor(private http:HttpClient){
		
	}
}

Post 请求

//post.service.ts
const baseUrl = " https://www.easy-mock.com/mock/5cac9abdbf60940c8b889555/"
import {Injectable} from '@angular/core'
import {HttpClient} from '@angular/common/http'
//如果不需要自己设置请求头的话，可以不写,这是一个可选参数
const httpOptions ={
	headers:new HttpHeaders({
	'Content-Type':'application/json'
})
}
Injectable({
	provideIn:'root'
})
export class PostService{
	constructor(private http:HttpClient){
		
	}
	postGetSomething(){
		return this.http.post(baseUrl+'upload',null,httpOptions)
	}

}

然后在组件中引入

//admin.component.ts
import {Component} from '@angular/core'
import {GetService} from './get.service'
import {PostService} from './post.service'
@Component({})
export class AdminComponent implements OnInit{
	ngOnInit(){
		this.getService.getSomething().subscribe(res=>{
			console.log(res)
			console.log(res.headers)
			consonel.log(res.body)
		})
		this.post.postGetSomething().subscribe(res=>{
			console.log(res)
		}
		
	}
	constructor(private getService:GetService,private post:PostService){
		
	}
}