angular8 http请求

最新推荐文章于 2021-12-27 14:17:15 发布

Null_Bugs

最新推荐文章于 2021-12-27 14:17:15 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

分类专栏： angular8

本文链接：https://blog.youkuaiyun.com/Null_Bugs/article/details/100926478

angular8 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何在Angular8中使用HttpClient进行HTTP请求。包括下载Postman辅助工具，安装和配置rest.client插件，以及在Angular应用中导入HttpClientModule。重点讲解了HttpClient的get、post、put、delete方法，并指出它们返回的是Observablle类型，需要订阅才能发送请求。同时，文章还提到了在不同环境中配置HTTP请求的方法和在组件中注入HttpClient的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://www.getpostman.com 下载postman

在编辑器中搜索rest.client插件

新建一个rest.http的文件

@baseUrl = https://jsonplaceholder.typicode.com

GET {{baseUrl}}/posts HTTP/1.1

###
POST  {{baseUrl}}/POST HTTP/1.1
Content-Type: : application/json

{
    "title":"这是一个测试的标题",
    "body":"这是一个测试的内容",
    "userId":1
}

Angular HttpClient

导入HttpClientModule

只在根模块中导入

整个应用秩序导入一次，不要在其他的模块导入

在构造中注入 HtppClient

get/post/putdelete 方法对应于Http方法

这些方法是泛型的，可以直接把放回的JSON转换成对应类型

不规范的请求，使用request

返回的值是Observablle

必须订阅，才会发送请求，否则不会发送

编辑器中配置rest client

首先在设置中搜索 restclient 找到这个

添加配置环境变量

"rest-client.environmentVariables":{
        "$shared": {
            "iCode":"123456"
        },
        "dev":{
            "host":"http://localhost:8080"
        },
        "prod":{
            "host":"http://local.dev"
        },
        "imooc":{
            "host":"http://apis.imooc.com/api"
        }
    }

按F1 搜索rest client 选择 switch environmentVariable 再选择自己配置的环境变量

在 environment.prod.ts中也要添加配置

在app.module.ts中引入HttpClientModule import { HttpClientModule } from '@angular/common/http'

在home.service.ts中

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { TopMenu, ImageSlider, Channel } from 'src/app/shared/components';
import { environment } from 'src/environments/environment';

@Injectable({
    providedIn:'root'
})
export class HomeService {
  constructor(private http:HttpClient){}
    getTabs(){
        return this.http.get<TopMenu[]>(`${environment.baseUrl}/tabs`,{params:{key:`${value}`}})
    }
    getChannels(){
        return this.http.get<Channel[]>(`${environment.baseUrl}/channels`,{params:{key:`${value}`}})
    }
    getImageSliders(){
        return this.http.get<ImageSlider[]>(`${environment.baseUrl}/banners`,{params:{key:`${value}`}})
    }
}

使用数据

this.service.getTabs().subscribe(tabs =>{
      this.menus = tabs;
    })

如果@component中添加changeDetection:ChangeDetectionStrategy.OnPush

this.service.getChannels().subscribe(channels => {
      this.channels = channels;
      this.cd.markForCheck();
})
this.service.getImageSliders().subscribe(imgs => {
      this.imageSliders = imgs;
      this.cd.markForCheck();
})