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设计模式 |