angular 封装http请求、解决跨域问题

第一部分：封装http请求

1.定义 ResultDataModel

export interface ResultDataModel<T> {
    success: boolean;
    errCode: number;
    message: string;
    data: T;
    pageModel: PageModel;
}

export interface PageModel {
    pageIndex: number;
    pageSize: number;
    pageCount: number;
    totalNum: number;
    totalPage: number;
}

2.定义 QueryModel

export class QueryModel {
    items: QueryItem[];
    page: QueryPage;
    constructor() {
        this.items = [];
        this.page = new QueryPage();
    }
    setItems(key: string, value: string) {
        this.items.push({ key: key, value: value });
    }
    setPage(pageIndex: number, pageSize: number, pageCount: number) {
        this.page.pageIndex = pageIndex;
        this.page.pageSize = pageSize;
        this.page.pageCount = pageCount;
    }
}
export class QueryItem {
    key: string;
    value: string;
    constructor() {
        this.key = this.value = ''
    }
}
export class QueryPage {
    pageIndex: number;
    pageSize: number;
    pageCount: number;
    constructor() {
        this.pageIndex = this.pageSize = this.pageCount = 0
    }
}

3.书写自定义http服务，命名为vhttp

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { ResultDataModel } from '../model/ResultDataModel';
import { catchError } from 'rxjs/operators';
import { QueryModel } from '../model/QueryModel';
@Injectable({
  providedIn: 'root'
})
export class VhttpService {

  constructor(public http: HttpClient) { }

  get(url: string, token?: string): Observable<ResultDataModel<any> | null> {
    let _token: string = '';
    if (token)
      _token = token
    let header: HttpHeaders = new HttpHeaders({
      Authorization: _token
    });
    // header.set('Authorization', token); 不能这么写
    return this.http.get<ResultDataModel<any>>(url, { headers: header })
      .pipe(
        catchError(res => {
          console.log(res);
          return of(null);
        }),
        // map((res: ResultDataModel<any>) => {
        //   if (!res.success) {
        //     console.log(res?.message)
        //     throwError(res?.message)
        //   }
        //   return res
        // })
      );
  }

  post(url: string, query?: QueryModel, token?: string): Observable<ResultDataModel<any> | null> {
    //header
    let _token: string = '';
    if (token)
      _token = token
    let header: HttpHeaders = new HttpHeaders({
      Authorization: _token
    });
    return this.http.post<ResultDataModel<any>>(url, query, { headers: header })
      .pipe(
        catchError(res => {
          console.log(res);
          return of(null);
        }),
      );
  }
}

　　使用看看

    this.vhttp.get('/api' + '/jwt/ceshi2', token)
      .pipe(
        map(res => {
          if (!res) {
            console.log('!res')
            return
          }
          if (!res.success) {
            console.log('!res?.success')
            return
          }
          return res.data
        })
      )
      .subscribe(res => console.log(res));


    let query: QueryModel = new QueryModel();
    query.setItems('sex','女');
    query.setItems('id','001');
    query.setPage(1,10,1);
    this.vhttp.post('/api' + '/jwt/ceshi3', query, token)
      .pipe(
        map(res => {
          if (!res) {
            console.log('!res')
            return
          }
          if (!res.success) {
            console.log('!res.success')
            return
          }
          return res.data
        })
      )
      .subscribe(res => console.log(res));

 

 

 

 

第二部分：

1.添加配置文件 proxy.conf.json (最外层,和src同级)

{
    "/api": {
        "target": "http://localhost:1111",
        "secure": false,

        "changeOrigin": true,
        "logLevel": "debug"
    }
}

　　在 angular.json 添加 proxyConfig 配置，位置如下

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "MyFirstDemo:build",
            "proxyConfig": "proxy.conf.json"
          },

　　重新启动程序

启动项目命令：ng serve --proxy-config proxy.conf.json
尝试过：ng serve --open 也是可以的

　　可以在改写 package.json，使用 npm start 启动项目

"start": "ng serve --proxy-config proxy.conf.json", 

　　会将  http://localhost:4200/api  的地址进行转换，如

http://localhost:4200/api/jwt/ceshi2
会转换为
http://localhost:1111/api/jwt/ceshi2

　　在输入url时，可省略 http://localhost:4200 只需要从 /api 开始，会自动补全

 

 

 

 

第三部分：

　　这样解决跨域并不稳妥，涉及多个api地址不好弄，最好的解决办法是取消后台跨域限制

　　因为这篇是angular ，这里就不纤细说明怎么取消，另附随笔： net core 添加cors，解决跨域问题

　　然后，写配置文件

　　

 

 　　代码如下：

export interface ApplicationConfig {
  vpart: string;
}

export const CONFIG: ApplicationConfig = {
  vpart: 'http://10.163.101.252:1103/api'
};

　　调用：

import { CONFIG } from 'src/config/api.config';
return this.vhttp.get(CONFIG.vpart+'url')