相思资源网 Design By www.200059.com

现代浏览器支持使用两种不同的 API 发起 HTTP 请求:XMLHttpRequest 接口和 fetch() API。

@angular/common/http 中的 HttpClient 类为 Angular 应用程序提供了一个简化的 API 来实现 HTTP 客户端功能。

一、准备工作

首先在app.module.ts 导入 HttpClientModule。如下:

import { HttpClientModule } from '@angular/common/http';
@NgModule({
 imports: [
  HttpClientModule,
 ]
})
export class AppModule {}

浅谈Angular HttpClient简单入门

二、在需要引用HttpClient的service.ts中引入HttpClient,如下:

import { HttpClient } from '@angular/common/http';
export class ConfigService {
 constructor(private http: HttpClient) { }
}

浅谈Angular HttpClient简单入门

三、请求数据

return this.http.get/post(url:'请求地址' ,
  options: {
   headers: this.headers
  })
   .toPromise()
   .then((data: any) => {
    return data;
   })
   .catch((err) => {
    console.log(err);
   });
 }

浅谈Angular HttpClient简单入门

四、在对应的component.ts文件中引入service

浅谈Angular HttpClient简单入门

数据格式:

{
  "lists":[
    {"title":"","pic":""},
    {"title":"","pic":""}
  ]
}

五、页面上调用

浅谈Angular HttpClient简单入门

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
Angular,HttpClient,Angular,HttpClient入门

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“浅谈Angular HttpClient简单入门”

暂无浅谈Angular HttpClient简单入门的评论...