Angular http

Love The Way You Lie 2023-05-30 12:00 43阅读 0赞

### 一、引用 ###

引用即使用前的准备，要使用http请求，根据mvc的模块设计，应该从model层入手，即在service中使用。

1.1 在app.module.ts中导入HttpClientModule模块

import { HttpClientModule } from '@angular/common/http';

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 1][]

### 二、使用 ###

2.1 在service层中引入并使用

cart.services.ts:

/*
     * @Author: tom 
     * @Date: 2019-11-10 13:03:06 
     * @Last Modified by: tom
     * @Last Modified time: 2019-11-10 15:11:12
     */
    
    import { Injectable } from '@angular/core';
    import { products } from 'src/assets/products';
    import { HttpClient } from '@angular/common/http';
    
    @Injectable({
      providedIn: 'root'
    })
    
    export class CartService {
    
      // 构建数组，保存加入购物车的product对象
      items = [];
      
      constructor(
        private http: HttpClient
      ) { }
    
      // 添加到购物车
      addToCart(product) {
        this.items.push(product);
      }
    
      // 清空购物车
      clearCart() {
        this.items = [];
        return this.items;
      }
    
      // 获取购物车内容，用于购物车组件界面显示
      getItem() {
        return this.items;
      }
    
      // 通过http请求获取到需要的数据，并返回给控制层
      getShippingByHTTP() {
        return this.http.get('../../assets/shipping.json');
      }
    
    }

此处即为通过http的get请求方式获取到json数据

\]![20191110151210565.png][]

shipping.json:

[
        {
          "type": "Overnight",
          "price": 25.99
        },
        {
          "type": "2-Day",
          "price": 9.99
        },
        {
          "type": "Postal",
          "price": 2.99
        }
      ]

2.2 在购物车中使用

product-shipping.component.ts:

import { CartService } from './../../Service/cart.service';
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-product-shipping',
      templateUrl: './product-shipping.component.html',
      styleUrls: ['./product-shipping.component.css']
    })
    export class ProductShippingComponent implements OnInit {
    
      shippingCosts;
      
      constructor(
        private cartService : CartService
      ) { 
        this.shippingCosts = this.cartService.getShippingByHTTP();
      }
    
      ngOnInit() {
      }
    
    }

product-shipping.component.html:

<p>
      product-shipping works!
    </p>
    
    <h3>Shipping Price</h3>
    
    
    <div *ngFor="let item of shippingCosts | async">
      {
       {item.type}}
      {
       {item.price | currency}}
    </div>

可以看到在for循环获取数据时，我还加了一层 async管道，async会将这一个模块包装进一个异步测试区域。当该区域中的所有异步调用都已完成时，这个dom结构会自动渲染。

得到最终结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191110151022941.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191110151056643.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[20191110151210565.png]: https://img-blog.csdnimg.cn/20191110151210565.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191110151604314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70