httpclient ajax post,angular HttpClient post请求报错

问题描述

才刚刚开始接触angularJs，提的问题也许很弱智，还是请大神们帮帮忙。

直接用ng-cli创建的新项目，跟着网上的教程敲了hero实例

大概了解了一点点angular的使用，现在卡在了http请求的部分。

问题出现的环境背景及自己尝试过哪些方法

用的是service和component分离的方法，请求方法封装在service里，return出来，在component里调用的

接口是用的别的项目的一个登录接口，能够使用的，不存在接口地址有误的情况

在最下方附上接口在另一个项目里的请求情况，是用ajax请求的

现在就是一直报404错误，但是没有在谷歌浏览器的NetWork里看到请求

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

//app.module.ts

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

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

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

import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';

...

@NgModule({

declarations: [

...

],

imports: [

...

HttpClientInMemoryWebApiModule.forRoot(

InMemoryDataService, { dataEncapsulation: false},

)

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

//service.ts

import { Injectable } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable, of } from 'rxjs';

import { catchError, map, tap } from 'rxjs/operators';

const httpOptions = {

headers: new HttpHeaders({'Content-Type': 'application/json; charset=UTF-8'})

}

@Injectable({

providedIn: 'root'

})

export class BusinessSystemService {

private result;

private testUrl = 'http://192.168.1.201:8080/user/login';

// 测试远程

getBusinessSystem(): Observable {

return this.http.post(this.testUrl,

{'username': 'pwy', 'password': '123456'},

httpOptions).pipe(

tap(list => console.log('getTestList success!')),

catchError(this.handleError('getTestList Error'))

);

}

private handleError (operation = 'operation', result?: T) {

return(error: any): Observable => {

console.error(error);

// this.log(`${operation} failed:${error.message}`);

return of(result as T);

};

}

constructor(

private http: HttpClient,

) { }

}

//component.ts

import { Component, OnInit } from '@angular/core';

import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';

import { BusinessSystemService } from '../business-system.service';

@Component({

selector: 'app-business-system',

templateUrl: './business-system.component.html',

styleUrls: ['./business-system.component.css']

})

export class BusinessSystemComponent implements OnInit {

testList: any;

getTestList(): void {

this.service.getBusinessSystem().subscribe(list => this.testList = list);

}

constructor(

private service: BusinessSystemService,

private http: HttpClient

) { }

ngOnInit() {

this.getTestList();

}

}

更换接口及方法

//component.ts

import { Component, OnInit } from '@angular/core';

import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';

// import { BusinessSystemService } from '../business-system.service';

const httpOptions = {

headers: new HttpHeaders({'Content-Type': 'application/json; charset=UTF-8'})

}

const param = new HttpParams().append('username', 'pwy').append('password', '123456');

@Component({

selector: 'app-business-system',

templateUrl: './business-system.component.html',

styleUrls: ['./business-system.component.css']

})

export class BusinessSystemComponent implements OnInit {

testList: any;

getTestList(): void {

// this.service.getBusinessSystem().subscribe(list => this.testList = list);

this.http.get('http://192.168.0.66:9002/secondDel/getindexList', httpOptions)

.subscribe((result) => {

console.log('http success');

this.testList = result;

}, response => {

console.log('http error');

console.log(response);

}, () => {

console.log('The POST observable is now completed.');

});

}

constructor(

// private service: BusinessSystemService,

private http: HttpClient

) { }

ngOnInit() {

this.getTestList();

}

}

你期待的结果是什么？实际看到的错误信息又是什么？

更换接口及方法后

swagger 成功