angular 网络服务 - GET

最新推荐文章于 2024-09-13 23:32:49 发布

听海边涛声

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量196

点赞数 1

文章标签： angular.js 前端 javascript

本文链接：https://blog.csdn.net/panghuangang/article/details/141250596

版权

angular自带网络服务模块，可以快捷完成网络请求操作。

环境准备

运行命令ng n ngPro1 --standalone=false创建一个angular应用。
项目自动生成的package.json文件的内容为：

{
  "name": "ng-pro1",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.1.0",
    "@angular/common": "^18.1.0",
    "@angular/compiler": "^18.1.0",
    "@angular/core": "^18.1.0",
    "@angular/forms": "^18.1.0",
    "@angular/platform-browser": "^18.1.0",
    "@angular/platform-browser-dynamic": "^18.1.0",
    "@angular/router": "^18.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.1.4",
    "@angular/cli": "^18.1.4",
    "@angular/compiler-cli": "^18.1.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.5.2"
  }
}

项目创建成功后，运行ng g c myc01命令创建一个新的组件：
在这里插入图片描述

到根组件文件中，把新生成的组件显示出来：
在这里插入图片描述

在这里插入图片描述

网络服务

加载网络服务

网络服务模块，默认是不加载的，必须手动修改配置文件进行加载。
注意：现在HttpClientModule已经废弃，改用provideHttpClient。

修改项目的app.module.ts文件：
在这里插入图片描述

在组件中使用网络服务，发起GET请求

在myc01.component.ts文件通过依赖注入、调用：
在这里插入图片描述

浏览器控制台打印了返回结果：
在这里插入图片描述

在网络中查看：
在这里插入图片描述

下面在组件中把返回的数据显示出来

组件的myc01.component.ts文件：

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-myc01',
  templateUrl: './myc01.component.html',
  styleUrl: './myc01.component.css'
})
export class Myc01Component {
  res: Result = {
    message: '',
    data: {
      channels: []
    }
  }

  // 服务需要使用依赖注入机制进行加载操作
  constructor(public http: HttpClient) { }

  ngOnInit(): void {
    const url = 'http://geek.itheima.net/v1_0/channels'

    // 发送请求
    // subscribe 订阅的是请求返回值
    this.http.get<Result>(url).subscribe(res => {
      console.log(res)
      this.res = res
    })
  }
}

// 为了vscode的代码能给出现代代码提示，则需声明类型
interface Result {
  message: string
  data: ResultData
}

interface ResultData {
  channels: ChannelItem[]
}

interface ChannelItem {
  id: number
  name: string
}

组件的myc01.component.html文件：

<p>myc01 works!</p>

<!-- 在使用网络请求的数据之前，先判断数据是存在的，再使用 -->
<div *ngIf="res">
  <p>返回消息: {{ res.message }} </p>
  <p>返回的数据条数: {{ res.data.channels.length }}</p>

  <div *ngFor="let item of res.data.channels">
    <span>{{ item.id }} --- </span>
    <span>{{ item.name }}</span>
  </div>
</div>