Angular mit Express: Warum löst meine PUT-Anforderung nicht aus?

Question

Meine GET-Anfrage funktioniert, aber meine PUT-Anfrage scheint nicht ausgelöst zu werden. Die Funktion, in der es sich befindet, wird definitiv ausgeführt, da die console.log-Anweisungen in meiner Konsole angezeigt werden. Die console.log-Anweisungen in der http PUT-Anfrage werden nicht in der Google Chrome-Konsole oder in meinem Terminal angezeigt.

Eckig:

getCitiesSaved(): Observable<string[]> { 
    return this.http.get(this.url).map((data: Response) => { 
     this.currentCityList = data.json().cityAlerts; 
     return data.json().cityAlerts; 
    }); 
    } 

    addCity(cityName) { 
    let cityArr = this.currentCityList; 
    cityArr.push(cityName); 
    const body = JSON.stringify({ 
     id: this.userId, 
     cityAlerts: cityArr 
    }); 
    const headers = new Headers({ 'Content-Type': 'application/json' }); 
    console.log(body); 
    return this.http 
     .put(this.url, body, { headers: headers }) 
     .map((response: Response) => { 
     console.log('http put request ran in frontend'); 
     response.json(); 
     }) 
     .catch((error: Response) => { 
     this.errorService.handleSigninError(error.json()); 
     return Observable.throw(error.json()); 
     }); 
    } 

Express:

router.get('/users/:id', (req, res) => { 
    console.log('get user info'); 
    User.findOne({ 
    _id: req.params.id 
    }).exec((err, user) => { 
    if (err) { 
     return res.status(500).json({ 
     title: 'An error occured', 
     error: err 
     }); 
    } else { 
     console.log(user); 
     res.status(200).json(user); 
    } 
    }); 
}); 

router.put('/:users/:id', (req, res) => { 
    console.log('backend triggered'); 
    User.findOneAndUpdate(
    { 
     _id: req.params.id 
    }, 
    { $set: { cityAlerts: req.body.cityAlerts } }, 
    { upsert: true }, 
    function(err, newCityAlert) { 
     if (err) { 
     console.log(err); 
     } else { 
     console.log(newCityAlert); 
     res.send(newCityAlert); 
     } 
    } 
); 
}); 

Answer 1

Sie haben subscribe auf beobachtbaren aufrufen, bevor die Anforderung ausführt. Es sieht so aus, als müssten Sie map zu subscribe innerhalb addCity() ändern.

Aus der Dokumentation: https://angular.io/guide/http

Beachten Sie die Zeichnung (Methode). Alle von HttpClient zurückgegebenen Observables sind kalt, was bedeutet, dass sie Blaupausen für Anfragen sind. Nichts wird passieren, bis Sie subscribe() anrufen, und jeder dieser Anrufe wird eine separate Anfrage machen. Zum Beispiel sendet dieser Code eine POST-Anforderung mit den gleichen Daten zweimal:

Ihr Beispiel:

const req = http.post('/api/items/add', body); 
// 0 requests made - .subscribe() not called. 
req.subscribe(); 
// 1 request made. 
req.subscribe(); 
// 2 requests made. 

Ich hoffe, das hilft - ich auch über diese gestolpert.