Angular使用Axios发送请求

说明：

最近新老板用的技术是angular的，我之前只用的vue，所以就要学一下angular的东西，虽说他俩差不多但是有些点还是有差别的，所及记一下等后边忘了也好查一下，毕竟上网查不如自己做过的快。
下面是快速入门：

1、安装axios

执行命令：npm install axios --save
–save表示添加到package.json

2、创建service组件（服务）

1. 执行命令：ng g s service/axios-http
2. 项目app目录下会创建service目录，目录里会有axios-http.service.ts文件
3. 封装好请求方法

import { Injectable } from '@angular/core';
import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class AxiosHttpService {
  constructor() { }

  /**
   * 发送GET请求
   * @param url 请求地址
   * @param config 请求配置参数
   * @return Observable<any>
   */
  get(url: string, config?: AxiosRequestConfig): Observable<any> {
    return new Observable(observer => {
      axios.get(url, config)
        .then((response: AxiosResponse) => {
          observer.next(response.data);
          observer.complete();
        })
        .catch((error: AxiosError) => {
          observer.error(error);
        });
    });
  }

  /**
   * 发送POST请求
   * @param url 请求地址
   * @param data 请求数据
   * @param config 请求配置参数
   * @return Observable<any>
   */
  post(url: string, data?: any, config?: AxiosRequestConfig): Observable<any> {
    return new Observable(observer => {
      axios.post(url, data, config)
        .then((response: AxiosResponse) => {
          observer.next(response.data);
          observer.complete();
        })
        .catch((error: AxiosError) => {
          observer.error(error);
        });
    });
  }

  /**
   * 发送PUT请求
   * @param url 请求地址
   * @param data 请求数据
   * @param config 请求配置参数
   * @return Observable<any>
   */
  put(url: string, data?: any, config?: AxiosRequestConfig): Observable<any> {
    return new Observable(observer => {
      axios.put(url, data, config)
        .then((response: AxiosResponse) => {
          observer.next(response.data);
          observer.complete();
        })
        .catch((error: AxiosError) => {
          observer.error(error);
        });
    });
  }

  /**
   * 发送DELETE请求
   * @param url 请求地址
   * @param config 请求配置参数
   * @return Observable<any>
   */
  delete(url: string, config?: AxiosRequestConfig): Observable<any> {
    return new Observable(observer => {
      axios.delete(url, config)
        .then((response: AxiosResponse) => {
          observer.next(response.data);
          observer.complete();
        })
        .catch((error: AxiosError) => {
          observer.error(error);
        });
    });
  }
}

3、在组件中使用

1. 引入服务import {AxiosHttpService} from "../../service/axios-http.service";

2. 在组件构造函数中声明constructor(private axiosHttp:AxiosHttpService) {}

3. 定义发送请求的方法，方便使用

private getShipData(dateValue: any, leftValue: any){
    this.axiosHttp.post(
      `url`,
      `请求参数json`
      )
      .pipe(
        catchError((error: any) => { // 异常处理操作符
          this.errorMsg = error.message;
          return throwError(error);
        })
      )
      .subscribe((response: any) => { // 自定义操作符
        //请求成功的操作；response 返回的数据
      });
  }

4、测试

后台起个程序或者用测试工具测一下就OK，在这里就不赘述了。