欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅谈Angular HttpClient简单入门

程序员文章站 2022-11-23 11:42:32
现代浏览器支持使用两种不同的 api 发起 http 请求:xmlhttprequest 接口和 fetch() api。 @angular/common/http...

现代浏览器支持使用两种不同的 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简单入门

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