登录  /  注册
首页 > web前端 > js教程 > 正文

浅谈Angular中http请求模块的用法

青灯夜游
发布: 2021-03-04 10:15:40
转载
2017人浏览过

本篇文章给大家介绍一下angular中http请求模块的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

浅谈Angular中http请求模块的用法

相关推荐:《angular教程

首先模块引入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import {FormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {HttpClientModule,HttpClientJsonpModule} from '@angular/common/http'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    HttpClientJsonpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
登录后复制

组件中使用

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import Qs from 'qs';
@Component({
  selector: 'app-http',
  templateUrl: './http.component.html',
  styleUrls: ['./http.component.less']
})
export class HttpComponent implements OnInit {

  constructor(public http: HttpClient) { }

  ngOnInit(): void {

    this.getPostData(); //post
    this.getTestData();  //get
    this.getJsonpData()  //jsonp
  }

  getPostData() {
    this.http.post('http://localhost:3000/api/info', {
      name: 'laney'
    }, {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    }).subscribe((res) => {
      console.log(res);
    })
  }

  getTestData() {
    var obj1 = {
      name: 'alice',
      age: '20'
    }
    var params = Qs.stringify(obj1);
    console.log(params)
    //第一种方式:字符串拼接
    this.http.get('http://localhost:3000/api/school?' + params).subscribe((res) => {
      console.log(res);
    })

    //第二种方式:HttpParams
    var oarma = new HttpParams({ fromString: params });
    this.http.get('http://localhost:3000/api/school?', {
      params: oarma
    }).subscribe((res) => {
      console.log(res);
    })

  }

  getJsonpData() {
    this.http.jsonp('http://localhost:3000/getscript', 'callback').subscribe((res) => {
      console.log(res);
    })
  }
登录后复制

http封装

import { Injectable } from '@angular/core';
import {HttpClient,HttpHeaders,HttpParams} from '@angular/common/http';
import Qs from 'qs';
import { environment } from '../../environments/environment';
console.log(environment.baseURL);

@Injectable({
  providedIn: 'root'
})
export class RxjsService {

  constructor(public http:HttpClient) { }

  postFun(url,data){
      return this.http.post(environment.baseURL+url,data,{
        headers:new HttpHeaders({
          'Content-Type':'application/json'
        })
      })
  }

  getFun(url,data){
      var params = Qs.stringify(data);
      return this.http.get(environment.baseURL+url+'?'+params)
  }
}
登录后复制

使用

import { Component, OnInit } from '@angular/core';
import {RxjsService} from '../../services/rxjs.service';
@Component({
  selector: 'app-rxjs',
  templateUrl: './rxjs.component.html',
  styleUrls: ['./rxjs.component.less']
})
export class RxjsComponent implements OnInit {

  constructor(public rxjs:RxjsService) { }

  ngOnInit(): void {
  }

  getRXJS(){
    this.rxjs.getFun('/api/school',{
      name:'alice'
    }).subscribe((res)=>{
      console.log(res);
    })
  }

  postRXJS(){
    this.rxjs.postFun('/api/info',{
      name:'alice'
    }).subscribe((res)=>{
      console.log(res);
    })
  }

}
登录后复制

更多编程相关知识,请访问:编程视频!!

以上就是浅谈Angular中http请求模块的用法的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:csdn网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号