Angular6笔记之封装http的示例代码

我来给你讲解一下“Angular6笔记之封装http的示例代码”的完整攻略。

1. 视频教程

首先，我们可以参考视频教程，步骤如下：

• 创建一个新的Angular应用程序
• 在app.module.ts中导入HttpClientModule
• 在app.component.ts中创建一个HttpClient对象
• 在app.component.ts中使用HttpClient对象发送一个HTTP GET请求，并打印出服务器返回的数据

这个教程只是简单地演示了如何使用HttpClient对象发起一个GET请求，并没有太大的实际用途。接下来，我将通过两个具体的示例来展示如何封装http请求。

2. 示例1：获取所有文章列表

我们在开发中，通常需要调用后端API获取数据，再将其展示在前端页面上。下面代码示例展示了如何获取所有文章列表：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ArticleService {

  private baseUrl = 'http://your-api-url';

  constructor(private http: HttpClient) { }

  getAllArticles() {
    return this.http.get(`${this.baseUrl}/articles`);
  }
}

这里我们为文章创建了一个服务，通过调用HttpClient的get方法，返回所有文章列表。http.get方法返回一个Observable对象，我们可以在组件中通过订阅来获取数据。

下面是如何在组件中使用这个服务：

import { Component, OnInit } from '@angular/core';
import { ArticleService } from './article.service';

@Component({
  selector: 'app-article-list',
  templateUrl: './article-list.component.html',
  styleUrls: ['./article-list.component.css']
})
export class ArticleListComponent implements OnInit {

  articles: any;

  constructor(private articleService: ArticleService) { }

  ngOnInit() {
    this.articleService.getAllArticles().subscribe(
      res => {
        this.articles = res;
      },
      err => {
        console.log(err);
      }
    );
  }

}

在组件的ngOnInit()方法中，我们通过articleService.getAllArticles().subscribe()来获取文章列表，并将其保存在组件的articles变量中。

3. 示例2：添加一篇新文章

下面的代码示例展示了如何添加一篇新文章：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ArticleService {

  private baseUrl = 'http://your-api-url';

  constructor(private http: HttpClient) { }

  addArticle(article: any) {
    return this.http.post(`${this.baseUrl}/articles`, article);
  }
}

这个示例中，我们创建了一个名为addArticle的方法，用于向服务器添加一篇新文章。我们通过调用http.post方法来发送一个POST请求。

下面是组件中如何使用这个服务的示例：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { ArticleService } from './article.service';

@Component({
  selector: 'app-add-article',
  templateUrl: './add-article.component.html',
  styleUrls: ['./add-article.component.css']
})
export class AddArticleComponent implements OnInit {

  articleForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private articleService: ArticleService
  ) { }

  ngOnInit() {
    this.articleForm = this.formBuilder.group({
      title: [''],
      content: ['']
    });
  }

  onSubmit() {
    const formData = this.articleForm.value;
    this.articleService.addArticle(formData).subscribe(
      res => {
        console.log(res);
      },
      err => {
        console.log(err);
      }
    );
  }

}

在这个组件中，我们使用了Angular的FormBuilder来构建一个包含文章标题和正文的表单。当用户提交表单时，我们将表单数据传递给articleService.addArticle(formData)方法。

现在你可以封装http请求啦，如果还有不懂的地方可以回复我噢！