现代浏览器支持使用两种不同的 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 {}

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

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

三、请求数据

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

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

数据格式:

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

五、页面上调用

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

浅谈Angular HttpClient简单入门的更多相关文章

  1. ios – 使用MonoTouch,HttpClient和Charles Proxy时的HTTP流量监控问题

    我是HttpClient类的新手,我遇到了使用CharlesProxy监视请求的问题.基本上我需要的是监视从模拟器或实际iOS设备发出的请求.Here您可以找到有关如何配置CharlesforiOS开发的精彩教程.我正在制作简单的HttpClient请求,只是一个简单的授权代码有效,用户正在被授权,并且正在返回承载令牌.但是问题是,我在模拟器上的请求没有出现在Charleshttp流量监控列表中.

  2. 开发Swift iOS应用程序“正确的方式”

    最近,我学习了Swift和开发iOS应用程序的基础知识。现在,我想自己开发一个真正的应用程序,但我非常关心编写好的代码,所以我已经寻找“最佳实践”,“设计模式”和“正确的方式”来实现它。在我的搜索中,我发现这个greattutorial关于SwiftiOS应用程序中通常使用的所有设计模式,以及他们使用的示例。不应该将httpClient和persistencyManager声明为协议,然后HttpClient和PersistencyManager类实现该协议?我应该在哪里告诉应用程序?最后但并非最不重要的

  3. android – 用我非常简单的calabash测试用例不断得到错误“HTTPClient :: ReceiveTimeoutError”

    我是calabash-android测试自动化库的新手.我花了两天时间来理解这个问题没有成功:(我正在使用calabash-android版本0.8.0,我按照文档pre-definedsteps进行测试.我的测试很简单,只需等待登录界面(这是一个包含id为“email_field”的输入字段的活动),输入用户名和密码.这是我在功能文件中的步骤:当我使用命令calabash-android运行my

  4. Android httpclient – 获取具有抢先身份验证的文件

    我使用此示例代码获取网站的HTML代码时遇到问题.http://svn.apache.org/repos/asf/httpcomponents/httpclient/branches/4.0.x/httpclient/src/examples/org/apache/http/examples/client/ClientPreemptiveBasicAuthentication.java我必须使用上

  5. Android Studio是否支持用于Android UI设计的AngularJS?

    我对AndroidStudio有疑问:AS在设计XML文件时是否支持AngularJS代码,例如:对于小动画或效果?

  6. android – 如何使用ClientID和ClientSecret在Phonegap中使用Angularjs登录Google OAuth2

    我正尝试使用Angularjs(使用IonicFramework)通过GoogleOAuth2从我的Phonegap应用程序登录.目前我正在使用http://phonegap-tips.com/articles/google-api-oauth-with-phonegaps-inappbrowser.html进行登录.但是当我使用Angular-UI-RouterforIonic时,它正在创建非常

  7. Android无法访问org.apache.http.client.HttpClient

    我正在使用androidstudio创建一个向服务器发出GET请求的应用程序.我的代码是这样的:问题是AndroidStudio标记了这一行有错误:说“无法访问org.apache.http.client.HttpClient”这是我的gradle文件:解决方法在AndroidSDK23中不推荐使用HttpClient,因为它推断,您可以在HttpURLConnection中迁移代码https:/

  8. Android HttpClient,DefaultHttpClient,HttpPost

    我如何将字符串数据(JSONObject.toString())发送到URL.我想在util类中编写一个静态方法来执行此操作.我希望方法签名如下publicstaticStringpostData(Stringurl,StringpostData)抛出SomeCustomException字符串url的格式应该是什么返回String是来自服务器的响应,作为json数据的字符串表示.编辑目前的连接工

  9. Android:HTTPClient

    我正在从svn.apache.org尝试http-cleint教程.在运行应用程序时,我在控制台中收到以下错误.我在AndroidManifest.xml中添加了android.permission.INTERNET.HalloAndroid.java中的java代码如下任何帮助深表感谢.解决方法问题解决了.AndroidManifest.xml文件中的这一行导致了麻烦.

  10. android – 同时使用多个AsyncTasks的HttpClient请求

    我正在开发一个需要同时下载多个文件的应用程序.我正在为每个文件创建一个具有自己的HttpClient的AsyncTask,但是下一个文件只有在上一个文件完成后才开始下载.可能是服务器端的问题吗?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部