Angular核心-创建对象-HttpClient

Angular核心-创建对象

📒博客首页：蔚说的博客
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
🙏作者水平很有限，如果发现错误，求告知，多谢！
🌺有问题可私信交流！！！
（达内教育学习笔记）仅供学习交流

创建对象的两种方式

方式1：手工创建式—自己创建：let c2 =new Car（）
方式2：依赖注入式—无需自己new，只需要声明依赖；服务提供者就会创建被依赖的对象，注入给服务需要者

Angular核心概念—服务和依赖注入

Service：服务，Angular认为：组件与用户交互的一种对象，其中的内容都应该与用户操作有关系的；而与用户操作无关的内容都应该剥离出去，放在“服务对象”中，为组件服务；例如：日志记录，记时统计，数据服务器的访问…

创建服务对象的步骤：

1.创建服务对象并指定服务提供者

import { Injectable } from "@angular/core"

//所有的服务对象都是“可被注入的”
@Injectable({
    providedIn:"root"

    //指定当前服务对象在根模块中提供-appmodule
})
export class LogService{
    //执行日志记录功能
    doLog(action: any){
        let uname='admin'
        let time = new Date().getTime()
        console.log(`管理员：${uname}时间：${time}`)
    }
}

2.在组件中声明依赖，服务提供者就会自动注入进来，组件直接使用服务对象即可

//组件：服务使用者，必须声明依赖
  log
  constructor(abc:LogService){//声明依赖此处的abc变量会被注入为LogService实例
    this.log= abc//接收
  }
    doAdd(){//使用服务对象
    console.log('add')
    this.log.doLog(Action)
  }

使用Angular官方提供的服务对象—HttpClient Service

HttpClient 服务对象用于向指定的URl发起异步请求，使用步骤：
1.在主模块中导入HttpClient服务所在的模块
//app.module.ts
import {HttpClientModule} from ‘@angular/common/http’;
import :[BrowserModel，FormsModule，HttpClientModule]
2.在需要使用异步请求的组件中声明依赖于HttpClient 服务，就可以使用该对象发起异步请求了（只要声明，就可以被自动注入）
constructor（http:HttpClient）{
this.http=http
}
3.调用HttpClient实例实现异步请求
this.http.get(url).subscribe((res: any)=>{}）
效果图展示：

调用下列方法：即可得到调用api的信息

  loadProduct(){
    this.timer.start()
    let start =new Date().getTime()
    let url='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
    //使用注入进来的HttpClient实例发起异步请求
    this.http.get(url).subscribe((res: any)=>{
      this.anyList =res
      console.log('得到了响应消息')
      console.log(res)
      return this.anyList =res
    })
    let end = new Date().getTime()
    this.timer.end('admin')
    console.log('耗时：',end-start)
  }

面试题：前端体系中有哪些发起异步请求的工具？各自的利弊？

工具名	本质/优缺点
原生XHR	let xhr = new XMLHttpRequest()/浏览器支持的原生技术；基于回调方式处理响应
jQuery.ajax()	也是XHR，只是进一步封装而已/比原生要简单，基于回调方式处理
Axios	也是XHR，只是进一步封装而已/比原生要简单，基于Promise处理响应；可以排队、并发、撤销
NG HttpClient	也是XHR，只是进一步封装而已/比原生要简单，基于‘观察者模式’处理响应；可以排队、并发、撤销
Fetch	不再是XHR，是W3C提出的新技术，有望取代XHR/比XHR从根本上就更加先进；天然基于Promise，目前浏览器还有兼容性问题
需要学习：JavaScript设计模式