①使用ng g service services/storage创建一个服务组件
②在app.module.ts 中引入创建的服务
③在services/http.service.ts中封装一个简单的http请求
import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class HttpService { public hxApi = 'http://127.0.0.1:3000/'; constructor(public http: HttpClient) { } get(api: any, obj: any): any { return new Promise((resolve, reject) => { //使用Promise进行二次封装 this.http.get(this.hxApi + api, obj).subscribe({ next(res): any { resolve(res); }, error(err): any { reject(err); } }); }); } post(api: any, obj: any): any { const htttpOptions = { headers: new HttpHeaders({ 'Content-type': 'application/json' }) }; //post请求需要设置此参数 return new Promise((resolve, reject) => { this.http.post(this.hxApi + api, obj, htttpOptions).subscribe({ next(res): any { resolve(res); }, error(err): any { reject(err); } }); }); } }
④在组件中使用HttpService
import { Component } from '@angular/core'; import { HttpService } from './services/http.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.less'] }) export class AppComponent { title = 'angular-http'; constructor(public http: HttpService) { } getData(): void { this.http.get('users/xixi2', { params: { name: 'xixiGet' } }) //注意get请求和post请求的传参方式不一样 .then(res => { console.log(res); }) .catch(err => { console.log(err); }); } postData(): void { this.http.post('users/xixi', { name: 'xixiPost' }) .then(res => { console.log(res); }) .catch(err => { console.log(err); }); } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。