微信小程序之封装请求函数

来源:互联网 发布:过滤器返回json 编辑:程序博客网 时间:2024/06/01 12:54

微信小程序里自己封装了请求的函数,但几乎每个页面都要用到,所以为什么更方便的调用,再一次进行封装。

在app.js里面定义个全局对象,这样想要用到该函数,只需要在该页面的js文件里面,请求一个app实例。

废话不多说,先上代码:

//全局对象httpClienthttpClient:{    request:function(method,url,data){        //返回一个promise实例        return new Promise( (resolve,reject)=>{             wx.request({                url:url,                data:data,                mehtod:method,                success:function(res){                    resolve(res)                },                fail:function(res){                    reject(res);                },                complete:function(){                    console.log('complete');                }            })           })    }    //get方法:用来获取数据    get:function( url ) {        return this.request('GET',url);    },    //post方法:用来更新数据    post:function( url) {        resturn this.request('POST',url,data);    },    //put方法    put:function(url,data){        return this.request('PUT', url, data);    },    //delete方法    delete:function(url,data){        return this.request('DELETE', url, data);    }

在需要请求的页面调用:
例如:登录页面login.js

//获取app实例,从而调用全局对象的函数var app=getApp();login:function(){    var url='http:xxxxx/login';    var data={        userName:'xxxxx',        passwd:'xxxxxx'    }    app.httpClient.post( url,data )        .then( res=>{console.log("请求成功时调用该函数")})        .catch(res=>{console.log("请求失败时调用该函数")})}//为了更好的阅读,也可以将回调函数,定义在外面//这样loginSuccess:function(){    console.log("请求成功时调用该函数")},loginFail:function(){    console.log("请求失败时调用该函数")},login:function(){    var self=this;    var url='http:xxxxx/login';    var data={        userName:'xxxxx',        passwd:'xxxxxx'    }    app.httpClient.post( url,data )        .then( res=>self.loginSuccess())        .catch(res=>self.loginFail())}

是不是简洁多了。。。。

原创粉丝点击