Angular：使用service进行http请求的简单封装

①使用ng g service services/storage创建一个服务组件

②在app.module.ts 中引入HttpClientModule模块

③在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);
      });
  }
}