小程序请求API接口，网络请求封装

来源：互联网发布：淘宝售后服务期限编辑：程序博客网时间：2024/06/05 11:16

utils/request.js: 核心的API请求接口类封装

pages/index/index.js: 网络请求控制页面的逻辑

pages/index/index.wxml: 页面的布局文件

pages/index/index.wxss: 页面的样式文件

代码示例：

[AppleScript] 纯文本查看复制代码

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/**
 *@desc    API请求接口类封装
 *@author  [url=mailto:shangheguang@yeah.net]shangheguang@yeah.net[/url]
 *@date   2017-01-20
 */
 
/**
 *POST请求API
 *@param  {String}  url         接口地址
 *@param  {Object}  params      请求的参数
 *@param  {Object}  sourceObj   来源对象
 *@param  {Function}successFun  接口调用成功返回的回调函数
 *@param  {Function}failFun     接口调用失败的回调函数
 *@param  {Function}completeFun 接口调用结束的回调函数(调用成功、失败都会执行)
 */
function requestPostApi(url,params,sourceObj,successFun,failFun,completeFun){
    requestApi(url,params,'POST',sourceObj,successFun,failFun,completeFun)
}
 
/**
 *GET请求API
 *@param  {String}  url         接口地址
 *@param  {Object}  params      请求的参数
 *@param  {Object}  sourceObj   来源对象
 *@param  {Function}successFun  接口调用成功返回的回调函数
 *@param  {Function}failFun     接口调用失败的回调函数
 *@param  {Function}completeFun 接口调用结束的回调函数(调用成功、失败都会执行)
 */
function requestGetApi(url,params,sourceObj,successFun,failFun,completeFun){
    requestApi(url,params,'GET',sourceObj,successFun,failFun,completeFun)
}
 
/**
 *请求API
 *@param  {String}  url         接口地址
 *@param  {Object}  params      请求的参数
 *@param  {String}  method      请求类型
 *@param  {Object}  sourceObj   来源对象
 *@param  {Function}successFun  接口调用成功返回的回调函数
 *@param  {Function}failFun     接口调用失败的回调函数
 *@param  {Function}completeFun 接口调用结束的回调函数(调用成功、失败都会执行)
 */
function requestApi(url,params,method,sourceObj,successFun,failFun,completeFun){
    if(method=='POST'){
        var contentType ='application/x-www-form-urlencoded'
    }else {
        var contentType ='application/json'
    }
    wx.request({
        url:   url,
        method:method,
        data:  params,
        header:{'Content-Type':contentType},
        success:function (res){
            typeof successFun  =='function' &&successFun(res.data,sourceObj)
        },
        fail:function (res){
            typeof failFun     =='function' &&failFun(res.data,sourceObj)
        },
        complete:function (res){
            typeof completeFun =='function' &&completeFun(res.data,sourceObj)
        }
    })
}
 
module.exports={
        requestPostApi,
            requestGetApi
}

项目地址：https://github.com/shangheguang/weixinapp
项目下载：

weixinapp-master.zip (4.58 KB, 下载次数: 18)

0 0