为什么请求没有完成?

时间:2019-04-07 15:06:45

标签: angular mean-stack mean

对方法getCityCoords()的组件调用,但是它永远不会结束。

它检索一些具有地理和天气信息的对象,如果只有几个对象起作用,并且我有200个代码,但是如果有更多代码,它就永远不会结束。

enter image description here

我调查的结果表明连接存在问题,有关TCP的一些问题,但我不知道如何解决。有什么方法可以关闭连接?

这是代码:

import { Component, OnInit } from '@angular/core';
import { MapService } from '../../services/map.service';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Map } from '../../models/map';

import { Icon, icon, Marker, marker } from 'leaflet';

declare let L;
var map;

@Component({
  selector: 'map-component',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  private defaultIcon: Icon = icon({
    iconUrl: 'assets/leaflet/marker-icon.png',
    shadowUrl: 'assets/leaflet/marker-shadow.png',
    iconSize: [41, 51], // => random values you have to choose right ones for your case
    iconAnchor: [20, 51] // => random values too
  });

  public coordinates: [number];
  constructor(
    private _mapService: MapService, private _router: Router
  ) {

  }

  ngOnInit() {

    map = L.map('map').setView([0, 0], 2); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    this.getLocations();
  }

  getLocations() {

    var geoJsonMulti = {
      "type": "GeometryCollection",
      "geometries": [

      ]
    }

    this._mapService.getCoordinates().subscribe(
      response => {
        if (!response) {
          this._router.navigate(['/']);
        } else {
          var layer = response.cityFeatures.cities;
          layer.forEach(layer => {
            geoJsonMulti.geometries.push(layer);
          })
        }
        var myStyle = {
          "color": "#ff7800",
          "weight": 5,
          "opacity": 0.65
        };
        L.geoJSON(geoJsonMulti, {
          style: myStyle
        }).addTo(map);

        var myIcon = L.icon({
          iconUrl: 'assets/leaflet/marker-icon.png',
          iconSize: [41, 51],
          iconAnchor: [20, 51],
          popupAnchor: [-3, -76],
          shadowUrl: 'assets/leaflet/marker-shadow.png',
          shadowSize: [68, 95],
          shadowAnchor: [22, 94]
        });

        var options={

        }


        for(let i=0;i<geoJsonMulti.geometries.length;i++){
          var arrayCoords=[geoJsonMulti.geometries[i].coordinates[1],geoJsonMulti.geometries[i].coordinates[0]]
          var marker=L.marker(arrayCoords, {icon: myIcon,clickable: false}).addTo(map).bindPopup("<b>Average temp: </b>"+geoJsonMulti.geometries[i].averageTemp+
          "</br> <b>Average precipitations: </b>"+geoJsonMulti.geometries[i].averageRain);
        }


      },

      error => {
        let errorMessage = <any>error;
        if (errorMessage !== null) {
          let body = JSON.parse(error._body);
        }
      }
    );
  }
}

1 个答案:

答案 0 :(得分:0)

  

有什么方法可以关闭连接?

好的。我相信取消订阅会取消该请求。例如,如下所示:

const LONG_ENOUGH_ALREADY = 120000; // milliseconds

this._mapService.getCoordinates()
   .pipe(
      takeUntil(timer(LONG_ENOUGH_ALREADY))
   .subscribe( // the rest