对接数据交互API(Ionic前端)——发送GET、POST请求

/project_name/src/providers/rest/rest.tsrest.ts

"""

import { Observable } from 'rxjs/Rx';

import { Injectable } from '@angular/core';

import { Http, Response, Headers, RequestOptions } from '@angular/http';

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/catch';

@Injectable()

export class RestProvider {

    constructor(public http: Http) {

        //console.log('Hello RestProvider Provider');

    }

    // 登录url

    private apiUrlLogin ='http://127.0.0.1:5000/api/login';

    // 获取用户信息url

    private apiUrlUserInfo ='http://127.0.0.1:5000/api/get_user_info';

    // 登录

    login(mobile, password): Observable {

        let pramas = JSON.stringify({

            "telephone": mobile,

            "password": password,

        });

        return this.postUrlReturn(this.apiUrlLogin, pramas)

    }

    // 获取用户信息

    getUserInfo(userId): Observable {

        return this.getUrlReturn(this.apiUrlUserInfo +"?userid=" + userId);

    }

    // 全局获取 HTTP 请求的方法

    // get方法

    private getUrlReturn(url:string): Observable {

        return this.http.get(url)

        .map(this.extractData)

        .catch(this.handleError);

    }

    // post方法

    private postUrlReturn(url:string, pramas:string): Observable {

        let headers = new Headers({

            'Content-Type': 'application/x-www-form-urlencoded'

        });

        let options =new RequestOptions({

            headers: headers

        });

        return this.http.post(url, pramas, options)

        .map(this.extractData)

        .catch(this.handleError);

      }

    // 处理接口返回的数据,处理成 json 格式

    private extractData(res: Response) {

        let body = res.json();

        return JSON.parse(JSON.stringify(body)) || {};

    }

    // 处理请求中的错误,考虑了各种情况的错误处理并在 console 中显示 error

    private handleError(error: Response |any) {

        let errMsg:string;

        if (errorinstanceof Response) {

            const body = error.json() ||'';

            const err = body.error || JSON.stringify(body);

            errMsg =`${error.status} - ${error.statusText ||''} ${err}`;

        }else {

            errMsg = error.message ? error.message : error.toString();

        }

        console.error(errMsg);

        return Observable.throw(errMsg);

   }

}

参考资料

Ionic3 前端JS发送post请求部分

ionic3 post请求方法


对接数据交互API(Flask后端)——获取GET、POST请求

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 137,006评论 19 139
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,193评论 0 2
  • Overview The ccxt library is a collection of available cr...
    郭蝈儿蝈儿阅读 4,051评论 0 1
  • 未来是你的选择,你可以选择未来是美好,还是痛苦。你可以选择苦一阵子,或者~~~苦一辈子。 致小兔子的一封信:小兔子...
    英伦小兔子阅读 733评论 2 1
  • 2016年,我留下的痕迹。 这一年翻书78本,大部分小说,看书完全看心情,想看哪本看哪本,完全没有计划,要说收获了...
    歪小丫阅读 244评论 0 0

友情链接更多精彩内容