Angular基础系列学习（六）--异步数据交互（请求数据&接口调用）

Angular从入门到放弃秘籍

第一篇Angular的介绍以及基本环境搭建

第二篇Angular模板语法、插值语法、事件绑定

第三篇Angular内置基本指令介绍

第四篇Angular组件的创建、组件声明周期钩子函数

第五篇Angular父子组件传值，父传子，子传父，组件之间

第六篇Angular请求数据

第七篇Angular路由介绍、两种路由传参

前言

这个系列博客主要从Angular基础入手到入门在到一个后台应用的开发，学习过程中会不断将代码提交到下面仓库，感兴趣的朋友可以相互学习。这篇文章主要是给大家介绍Angular如何请求数据

一、利用Angular自身HttpModule实现

写在前面：
首先Angular进行异步的数据请求可以利用Angular自身的Http模块进行，还可以利用现在比较好用的外部模块比如axios等包来实现，接下来我们先看看如何利用自身的Http模块如何实现。

// 我们需要在哎app.module.ts中引入HttpClientModule包
import { HttpClientModule } from '@angular/common/http'
//在import中注入依赖
@NgModule({
  declarations: [
    AppComponent
 ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [StroageService],
  bootstrap: [AppComponent]
})
//假如我们在A组件中需要请求数据，那么就在A组件的ts文件中引用
// 引入请求模块
import { HttpClient } from '@angular/common/http'
//并且在构造函数中初始化
constructor(public http:HttpClient) { }
//在函数中使用
//本处使用自己的node接口
let api = 'http://localhost:3001/goods/goodslist'
//angular默认遵守Rxjs（类似于Promise的异步接口数据获取郭凡）的规范
this.http.get(api).subscribe((res)=>{
//打印获取的数据
  console.log(res)
})

二、使用外部模块Axios实现

写在前面：
这部分主要介绍如何使用axios，我会创建一个公共服务，然后对axios进行封装，接下来向大家介绍我是如何封装的。

//使用ng g service httpService创建一个公共的service服务
// npm install axios --save 安装axios
// 在公共的服务中对axios进行封装
//引入axios
import  Axios  from 'axios'
//使用promise进行封装
axiosGet(api){
  return new Promise((resovle)=>{
     Axios.get(api).then(res=>{
       resovle(res)
     })
  })
}

//A组件中引入
// 引入axios模块公共模块
import  { StroageService }  from "../../services/stroage.service";
//构造函数中进行初始化
constructor(public axios:StroageService) { }
//函数中进行调用
 AxiosgetData(){
    let api = 'http://localhost:3001/goods/goodslist'
    this.axios.axiosGet(api).then(res=>{
      console.log(res)
    })
  }