• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序网络请求封装

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
httputils.js

1.请求头少不了

1 /**
2  * 请求头
3  */
4 var header = {
5   \'content-type\': \'application/x-www-form-urlencoded\',
6   \'Authorization\': "Bearer " + wx.getStorageSync("token"),
7   \'os\': \'android\',
8   \'version\': \'1.0.0\',
9 }

值得注意的是content-type\': \'application/json,死活不行,必须content-type\': \'application/x-www-form-urlencoded
大家使用的时候,注意这点,反正我被坑了很久。坐等你入坑

2.请求参数少不了

1 /**
2  * function: 根据需求处理请求参数:添加固定参数配置等
3  * @params 请求参数
4  */
5 function dealParams(params) {
6   console.log("请求参数:", params)
7   return params;
8 }

3.get请求

function get(url, params, onSuccess, onFailed) {
  console.log("请求方式:", "GET")
  request(url, params, "GET", onSuccess, onFailed);
}

4 .post请求

/**
 * 供外部post请求调用  
 */
function post(url, params, onSuccess, onFailed) {
  console.log("请求方式:", "POST")
  request(url, params, "POST", onSuccess, onFailed);

}

5.request请求方法

 1 /**
 2  * function: 封装网络请求
 3  * @url URL地址
 4  * @params 请求参数
 5  * @method 请求方式:GET/POST
 6  * @onSuccess 成功回调
 7  * @onFailed  失败回调
 8  */
 9 
10 function request(url, params, method, onSuccess, onFailed) {
11   console.log(\'请求url:\' + url);
12   wx.showLoading({
13     title: "正在加载中...",
14   })
15   console.log("请求头:", header)
16   wx.request({
17     url: url,
18     data: dealParams(params),
19     method: method,
20     header: header,
21     success: function(res) {
22       wx.hideLoading();
23       console.log(\'响应:\', res.data);
24 
25       if (res.data) {
26         /** start 根据需求 接口的返回状态码进行处理 */
27         if (res.statusCode == 200) {
28           onSuccess(res.data); //request success
29         } else {
30           onFailed(res.data.message); //request failed
31         }
32         /** end 处理结束*/
33       }
34     },
35     fail: function(error) {
36       onFailed(""); //failure for other reasons
37     }
38   })
39 }

最终的httputils.js

 1 /**
 2  * 请求头
 3  */
 4 var header = {
 5   \'content-type\': \'application/x-www-form-urlencoded\',
 6   \'Authorization\': "Bearer " + wx.getStorageSync("token"),
 7   \'os\': \'android\',
 8   \'version\': \'1.0.0\',
 9   \'device_token\': \'ebc9f523e570ef14\',
10 }
11 
12 /**
13  * 供外部post请求调用  
14  */
15 function post(url, params, onSuccess, onFailed) {
16   console.log("请求方式:", "POST")
17   request(url, params, "POST", onSuccess, onFailed);
18 
19 }
20 
21 /**
22  * 供外部get请求调用
23  */
24 function get(url, params, onSuccess, onFailed) {
25   console.log("请求方式:", "GET")
26   request(url, params, "GET", onSuccess, onFailed);
27 }
28 
29 /**
30  * function: 封装网络请求
31  * @url URL地址
32  * @params 请求参数
33  * @method 请求方式:GET/POST
34  * @onSuccess 成功回调
35  * @onFailed  失败回调
36  */
37 
38 function request(url, params, method, onSuccess, onFailed) {
39   console.log(\'请求url:\' + url);
40   wx.showLoading({
41     title: "正在加载中...",
42   })
43   console.log("请求头:", header)
44   wx.request({
45     url: url,
46     data: dealParams(params),
47     method: method,
48     header: header,
49     success: function(res) {
50       wx.hideLoading();
51       console.log(\'响应:\', res.data);
52 
53       if (res.data) {
54         /** start 根据需求 接口的返回状态码进行处理 */
55         if (res.statusCode == 200) {
56           onSuccess(res.data); //request success
57         } else {
58           onFailed(res.data.message); //request failed
59         }
60         /** end 处理结束*/
61       }
62     },
63     fail: function(error) {
64       onFailed(""); //failure for other reasons
65     }
66   })
67 }
68 
69 /**
70  * function: 根据需求处理请求参数:添加固定参数配置等
71  * @params 请求参数
72  */
73 function dealParams(params) {
74   console.log("请求参数:", params)
75   return params;
76 }
77 
78 
79 // 1.通过module.exports方式提供给外部调用
80 module.exports = {
81   postRequest: post,
82   getRequest: get,
83 }

写好httputils.js后,一定要通过module.exports给外部使用

使用:

1.在需要js的页面,引入httputils.js

var http = require(\'../../httputils.js\');   //相对路径

2.调用

var prams = {
        username: "1111",
        password:"123456"
      }
http.postRequest("https://www.baidu.com", prams,
        function(res) {
         
        },
        function(err) {
         
        })

效果图

 

 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序封装request请求发布时间:2022-07-18
下一篇:
[转]微信小程序开发:http请求 - freeliver54发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap