zoukankan      html  css  js  c++  java
  • Angular中的数据请求 内置模块HttpClient实现(get post jsonp 以及第三方模板axios请求数据

    封装服务:

    httpservice.service.ts

    import { Injectable } from '@angular/core';
    import axios from "axios";
    @Injectable({
      providedIn: 'root'
    })
    export class HttpserviceService {
    
      constructor() { }
      axiosGet(api){
        return new Promise((resolve,reject)=>{
          axios.get(api).then(function(response){
            resolve(response)
          });
        });
      }
    }

    在app.module.ts中使用:

    import{HttpserviceService}from "./services/httpservice.service";

    providers: [HttpserviceService],

    2.

    app.module.ts

    //引入HttpClientModule
    import{HttpClientModule,HttpClientJsonpModule}from "@angular/common/http";
    
      imports: [
        HttpClientModule,
        HttpClientJsonpModule
      ],

    http.component.ts

    import { Component, OnInit } from '@angular/core';
    //当作一个服务:
    import { HttpClient, HttpHeaders } from "@angular/common/http";
    import { from } from 'rxjs';
    
    
    //使用服务里面的axios获取数据:
    import{HttpserviceService} from "../../services/httpservice.service";
    @Component({
      selector: 'app-http',
      templateUrl: './http.component.html',
      styleUrls: ['./http.component.scss']
    })
    export class HttpComponent implements OnInit {
      public list: any[] = [];
      constructor(public http: HttpClient,public httpService:HttpserviceService) { }
    
      ngOnInit() {
      }
      getData() {
        alert("执行get请求");
        let api = "http://a.itying.com/api/productlist";
        this.http.get(api).subscribe((response: any) => {
          console.log(response);
          this.list = response.result;
        })
      }
    
      doLogin() {
        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }
        //存在跨域:
        var api = "";
        this.http.post(api, { "username": "张三", "age": 20 }, httpOptions).subscribe((response) => {
    
        });
        alert("执行");
      }
    
      getJsonpData() {
    
        //jsonp请求,服务器必须的支持jsonp:
    
        let api = "http://a.itying.com/api/productlist";
        this.http.jsonp(api, 'callback').subscribe((response)=>{
          console.log(response);
        });
      }
    
      getAxiosData(){
        let api = "http://a.itying.com/api/productlist";
        this.httpService.axiosGet(api).then((data)=>{
          console.log(data);
        });
      }
    }

    http.component.html

    <p>
        new works
    </p>
    <button (click)="getData()">get请求的数据</button>
    
    <br/>
    <ul>
        <li *ngFor="let item of list">
            {{item.title}}
        </li>
    </ul>
    
    <br/>
    <button (click)="doLogin()">post提交数据</button>
    
    <br/>
    <button (click)="getJsonpData()">jsonp请求</button>
    
    <br/>
    <button (click)="getJsonpData()">通过第三方模块获取的请求的数据</button>

  • 相关阅读:
    【288】◀▶ 博客园黑色代码主题实现
    【287】◀▶ arcpy 常用类说明
    【286】◀▶ Python 内置函数说明
    LeetCode Insert Interval
    Craking the coding interview 面试题:完美随机洗牌
    遭遇多线程bug (1)
    全情投入是做好工作的基础——Leo鉴书39
    《Java 并发编程实战》读书笔记之二:图文讲述同步的另一个重要功能:内存可见性
    视图控制器
    Chapter 1. OpenGL基础回顾
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/12174032.html
Copyright © 2011-2022 走看看