微信小程序request请求封装

微信小程序request请求封装

写的不好，欢迎大神们指点。谢谢！

• 当在项目中获取后台数据时，会应用到 wx.request({}) 发起https网络请求。
• 项目中需求： 如果是 POST请求 接口， 进行MD5加密。 根据实际需求即可。

API

wx.request网络请求API

完整request请求

说明：

1. 这里把request请求单独放在一个js文件中。 新建request.js
2. 为了方便查看， 这里分开写。需要使用时，可以直接按顺序copyrequest.js方法即可。

1. 下载并引入md5.js文件

微信小程序使用md5加密参考：

2. 在request.js文件中封装方法

//获取应用实例
const app = getApp()
import md5 from 'md5.js';
var TOKEN_KEY = 'Authorized-Token'



var url ='https://域名';
var rootDocment = url+'/api/';
var header = {
  'Accept': 'application/json',
  'content-type': 'application/json',
}

GET请求方法

/**
* url: 请求地址
* cb： 回调函数
* toast作用： 请求接口时， 显示loadding， 默认"显示"
*/
function getReq(url, cb, toast = true) {
    var token = wx.getStorageSync(TOKEN_KEY) || ''
    if (token) {
        header[TOKEN_KEY] = token;
    }
    if (toast) {
        wx.showLoading({
            title: '加载中',
        })
    }

    // console.log("token==" + token),
    wx.request({
        url: rootDocment + url,
        method: 'get',
        header: header,
        success: function (res) {
            if (toast) {  
                wx.hideLoading();
            }
            return  response_chuli(res, cb);
        },
        fail: function () {
            if (toast) {  
                wx.hideLoading();
            }
            wx.showModal({
                title: '网络错误',
                content: '网络出错，请刷新重试',
                showCancel: false
            })
            return typeof cb == "function" && cb(false)
        }
    })
}

POST请求方法

/**
* url: 请求地址
* data: 参数
* cb： 回调函数
* toast作用： 请求接口时， 显示loadding， 默认"显示"
*/
function postReq(url, data, cb, toast = true) {
    var token = wx.getStorageSync(TOKEN_KEY) || ''
    if (token) {
        header[TOKEN_KEY] = token;
    }
    if (toast){
        wx.showLoading({
            title: '加载中',
        })
    }
    
    //以下是 md5加密相关
    var appkey ='Abcdefghigk2019';  //测试
    var newObj = objKeySort(data);  //数据排序
    //console.log(newObj);
    let connects = '';
    for(let item in newObj){
        connects += newObj[item];
    }
    // 拼接格式登录： 15899999999123456Abcdefghigk2019  进行加密
    connects += appkey;

    //console.log(connects);
    data.sign = md5(connects);

    //console.log("header=="+token),
    
    //指定某个接口使用表单提交
    if(url=='user/test'){
        header['Accept'] = '*/*';
        header['content-type'] = 'application/x-www-form-urlencoded';
    }

    wx.request({
        url: rootDocment + url,
        header: header,
        data: data,
        method: 'post',
        success: function (res) {
            if (toast) {  
                wx.hideLoading();
            }
            return   response_handle(res, cb);
        },
        fail: function () {
            if (toast) {
                wx.hideLoading();
            }
            wx.showModal({
                title: '网络错误',
                content: '网络出错，请刷新重试',
                showCancel: false
            })
            return typeof cb == "function" && cb(false)
        }
    })

}

返回数据处理

//返回处理
function response_handle(res, cb) {
    if (401 === parseInt(res.status) || 401 === parseInt(res.data.code)) {
        //清除缓存
        wx.setStorageSync(TOKEN_KEY, '');
        wx.setStorageSync('userinfo', '');

        wx.navigateTo({
            url: '/pages/wxlogin/wxlogin?from=index' 
        })
        return ;

    } else if (200 === parseInt(res.data.code)){
        var t = res.header[TOKEN_KEY] || "";
        t && wx.setStorageSync(TOKEN_KEY, t);
    } 
    return typeof cb == "function" && cb(res.data)
}

JSON数据排序方法

//json数据排序
function objKeySort(obj,typesort = 'sort') {//排序的函数
    if(typesort == 'sort') {
        var newkey = Object.keys(obj).sort(); //升序
    }else {
        var newkey = Object.keys(obj).sort().reverse(); //降序
    }
    //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
    var newObj = {};//创建一个新的对象，用于存放排好序的键值对
    for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
        newObj[newkey[i]] = obj[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对
    }
    return newObj;//返回排好序的新对象
}

导出模块

module.exports = {
    getReq: getReq,
    postReq: postReq,
    header: header,
    rootDocment: rootDocment,
    url: url,
}

---

在项目中如何使用？

1. 引入request.js文件

var http = require('../../../utils/request.js');

2. 使用

get方式

getMeasureList: function() {
    var that = this;
    var params = 'p=' + that.data.p + '&page_size=' + that.data.page_size;
	
   	//调用get方法
    http.getReq("user/gaugerecord?" + params, function(res) {
        if (res.code != 200) {
            feedbackApi.showToast({
                title: res.msg,
                mask: false
            })
            return
        }
        let datas = res.data;
     
    }, false) //false代表不显示loadding
},

post方式

getQrcodeDeviceInfo: function() {
    let that = this;
    let params = {
        "combo_code": that.data.comboCode
    }
    
    //调用post方法
    http.postReq('user/getmacs', params, function(res) {
        wx.removeStorageSync('qrCodeData');
        if (res.code != 200) {
            feedbackApi.showToast({
                title: res.msg,
                mask: false
            })
            return;
        }
        let datas = res.data;
        
    })
},

感谢大神文章