1.在app.module.ts引入模块
import { HttpClientModule, HttpClientJsonpModule} from '@angular/common/http';
//引入 HttpClientModule, 如果需要用jsonp,就引入HttpClientJsonpModule
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
DetailComponent,
DetailQueryComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule,
HttpClientJsonpModule
],
providers: [],
bootstrap: [AppComponent]
})
// imports进行注入声明
2.在使用的地方引入HttpClient
//一般推荐服务注册来使用http
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; //引入httpClient
@Injectable({
providedIn: 'root'
})
export class HttpService {
//注入
constructor(public http: HttpClient) { }
// 定义get请求方法
getMsg(url: string, params: any) {
return this.http.get(url, {
params
});
}
// 定义jsonp的方法
getJsonpMsg(url: string, cb: string) {
return this.http.jsonp(url, cb);
}
}
3.通过服务可以在页面调用
import { HttpService } from '../../services/http.service'; //引入服务
constructor(public http: HttpService) {} // 注入服务
// 使用服务的get方法
getData() {
const api = 'http://a.itying.com/api/productList';
this.http.getMsg(api, {
userName: 'lj'
}).subscribe((res) => {
console.log(res);
});
}
// 使用服务的jsonp方法
getCallBackData() {
const api = 'http://a.itying.com/api/productList';
this.http.getJsonpMsg(api, 'callback').subscribe((res) => {
console.log(res);
});
}