ionic3的http请求参数序列化provider 封装

新建http provider

ionic g provider httpSer

import { HttpClient ,HttpHeaders} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ToastController ,AlertController} from 'ionic-angular';
/*
  Generated class for the HttpSerProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class HttpSerProvider {

  constructor(
    public http: HttpClient,
    public toastCtrl: ToastController,
    public alertCtrl: AlertController
 
  ) {
    
  }
  public url:string = 'http://xxx.com'
  //弹层
  public toast(message,duration) {
    const toast = this.toastCtrl.create({
      message: message,
      duration: duration
    });
    toast.present();
  }
  GET(urlmethod , callback ?: (res: any, error: any) => void): void  {    
    this.http.get(this.url + '' + urlmethod + '').subscribe(data =>{ 
      callback && callback(data, null);
    },err =>{
      callback && callback(null, err);}    
    )
  }
  POST(data, urlmethod , callback ?: (res: any, error: any) => void): void  {    
    const headers = new HttpHeaders().set("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");      
    this.http.post(this.url + '' + urlmethod + '', this.toQueryString(data), {headers})        
    .subscribe(res =>        { 
      callback && callback(res, null);
    },err =>{
      callback && callback(null, err);
    }        
  )}
  // 序列化
  private toQueryString(obj) {    
    let result = [];    
    for (let key in obj) {      
      key = encodeURIComponent(key);      
      let values = obj[key];      
      if (values && values.constructor == Array) {
                let queryValues = [];        
                for (let i = 0, len = values.length, value; i < len; i++) { 
                           value = values[i];          
                           queryValues.push(this.toQueryPair(key, value));       
                          }       
                           result = result.concat(queryValues);      
                         } else {    
                               result.push(this.toQueryPair(key, values));      
                              }
                            }                       
                               return result.join('&');  
            }

    private toQueryPair(key, value) {   
               if (typeof value == 'undefined'){      
                   return key;    
                   }    
                    return key + '=' + encodeURIComponent(value === null ? '' : String(value));  
                }
           }

使用的页面引入
import { HttpSerProvider } from '../../providers/http-ser/http-ser';
constructor中注入

  constructor(
    public httpser :HttpSerProvider
  ) {}

get请求

  this.httpser.GET('/xxx',(res,err)=>{
          if(err){
            return
            }
          conlose.log(res);
           this.httpser.toast('成功',2000)
          })

post请求

      let obj ={
          'name':'NBHH',
          'age':'18'
        }
      this.httpser.POST(obj,'/xxx',(res,err)=>{
        if(err){
           return
        }
        console.log(res);
        this.httpser.toast('成功',2000)
      })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,927评论 1 45
  • 一.前言 介绍一个比较火的混合开发技术框架,ionic。之前使用过framework7,但是接触到ionic后,感...
    vanTu阅读 1,786评论 0 0
  • sqlmap用户手册 说明:本文为转载,对原文中一些明显的拼写错误进行修正,并标注对自己有用的信息。 ======...
    wind_飘阅读 2,211评论 0 5
  • 梦想,一个梦一个想。就像是想着想着你就只能靠做梦去实现它。 此时此刻有多少人放弃了曾经的初心,为的只是在这个繁华...
    rainll阅读 183评论 0 0

友情链接更多精彩内容