angular4对http请求的封装

以你之姓@ 2022-05-27 11:53 193阅读 0赞

本章节使用到的技术点

*  1、封装了带头部信息的(可能出于安全考虑`CSRF`攻击类的,或者`python-web`开发就必须要带`tockend`头信息)
 *  2、简单的封装了`get`和`post`请求的基础模型
 *  3、把基础模型的类注入到项目开发中的接口模型中
 *  4、`form`表单提交数据仅仅是利用的模板局部变量的方式获取输入框的值
 *  5、使用代理解决开发过程中跨域的问题
 *  6、使用`express`搭建一个后端服务器
 *  7、`node`服务器对`mySQL`数据库的查询与增加数据

### 重要代码描述 ###

*  1、基础模型代码的封装
    
        import { Injectable } from '@angular/core';
        import { Http, Headers } from '@angular/http';
        import { Observable } from 'rxjs/Observable';
        import 'rxjs/Rx';
        
        @Injectable()
        export class ServiceBaseService {
            constructor(private http: Http) { }
            /**
             * @param {string} url地址
             * @param {any} [options]可选提交的参数
             * @param {any} [header]可选设置的头信息
             * @memberof ServiceBaseService
             * @title: 封装一个get请求的基础类
             */
            getData(url: string, options?: any, myheaders?: any): Observable<any> {
                // 配置请求头
                const myHeaders: Headers = new Headers();
                // tslint:disable-next-line:forin
                for (const key in myheaders) {
                    myHeaders.append(key, myheaders[key]);
                };
                url += (url.indexOf('?') < 0 ? '?' : '&') + this.param(options);
                return this.http.get(url, { headers: myHeaders }).map(res => res.json());
            }
        
            /**
             * @param url地址
             * @param options提交的数据
             * @param myheaders可选参数设置头
             * @title:封装一个post请求数据的
             */
            postData(url: string, options: any, myheaders?: any): Observable<any> {
                const myHeaders: Headers = new Headers();
                myHeaders.append('Content-Type', 'application/json');
                // tslint:disable-next-line:forin
                for (const key in myheaders) {
                    myHeaders.append(key, myheaders[key]);
                };
                return this.http.post(url, options, { headers: myHeaders });
            }
            /**
             * @param {any} data
             * @returns
             * @memberof ServiceBaseService
             * @title:封装一个序列化get请求的参数的方法
             */
            param(data): string {
                let url = '';
                // tslint:disable-next-line:forin
                for (const k in data) {
                    const value = data[k] !== undefined ? data[k] : '';
                    url += `&${k}=${encodeURIComponent(value)}`;
                }
                return url ? url.substring(1) : '';
            }
        }
 *  2、项目的根目录中创建`proxy.conf.json`解决跨域问题
    
        {
            "/wiseoper/**": {
                "target": "http://localhost:3000",
                "secure": false
            }
        }
 *  3、关于代理解决跨域的注意点请访问https://blog.csdn.net/kuangshp128/article/details/71909331
 *  4、关于`get`请求获取数据的模型
    
        import { Injectable } from '@angular/core';
        import { ServiceBaseService } from 'app/model/service-base.service';
        
        @Injectable()
        export class GetServiceService {
        
            constructor(private serviceBase: ServiceBaseService) { }
            // 获取数据  
            getData() {
                const url = '/wiseoper/';
                return this.serviceBase.getData(url, {name: 'hello', age: 20}, {QQ: '332904234'});
            }
        }
 *  5、在组件的`component.ts`中直接调用模型中的方法就可以
    
        // 直接调用get请求数据的方法
        getDate(): void {
            this.getService.getData().subscribe(data => {
                console.log(data);
            });
        }
 *  6、可以从控制台上查看给请求头添加的内容

### 关于`post`请求的封装 ###

*  1、服务器代码
    
        router.post("/wiseoper/register",(req,res)=>{
            //如果是post提交数据就用req.body接收  
            console.log(req.body);
            db("insert into cms_user(username,password) values(?,?)",[req.body.username,req.body.password],(err,data)=>{
                console.log(err);
                if (err){
                    res.json({
                        code:0,
                        info:"注册失败"
                    });
                }
                console.log(data);
                if (data){
                    res.json({
                        code:1,
                        info:"注册成功"
                    });
                }
            })
        });
 *  2、`angular4`中对`post`请求的封装
    
        /**
         * @param url地址
         * @param options提交的数据
         * @param myheaders可选参数设置头
         * @title:封装一个post请求数据的
         */
        postData(url: string, options: any, myheaders?: any): Observable<any> {
            const myHeaders: Headers = new Headers();
            myHeaders.append('Content-Type', 'application/json');
            // tslint:disable-next-line:forin
            for (const key in myheaders) {
                myHeaders.append(key, myheaders[key]);
            };
            return this.http.post(url, options, { headers: myHeaders });
        }

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220527/5b0c995293bd4f44a114bf0f7e020b5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220527/7774d7ad198f4bec99b615cd0b21ad91.png