zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

2023-09-27 14:29:06 时间

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)