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')

巴特西

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

最新文章

热门文章