小程序 - 封装 wx.request 请求（1.0）

版权声明：尊重原创！ https://blog.csdn.net/weixin_42675488/article/details/89049392

参考文献：
阮一峰 - es6 Promise	微信小程序封装 request 请求
	小程序选项卡页面切换 + 数据封装 + git
	什么是跨域？        Promise全解 - 异步操作
	小程序获取用户信息介绍和代码 (大官人博客)
	Acitylion - 分页懒加载

以Sync结尾都是同步方法。同步方法和异步方法的区别是：

• 1.同步方法会堵塞当前任务，直到同步方法处理返回。
• 2.异步方法不会塞当前任务。

操作	异步方法	同步方法
插入	wx.setStorage	wx.setStorageSync
读取	wx.getStorage	wx.getStorageSync
删除	wx.removeStorage	wx.removeStorageSync
清空	wx.clearStorage	wx.clearStorageSync
获取缓存信息	wx.getStorageInfo	wx.getStorageInfoSync

Page.prototype.setData()：

• setData 函数用于将数据从 逻辑层 发送到 视图层 （异步），同时改变对应的 this.data 的值（同步）；
• 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致；

——
	1、一般setData方法多用于点击后改变页面信息或者刷新后与后台交互获取最新的信息
	2、Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value

关于 var that = this :

—— this与that：this.setData报错

直接在wx:request()的 success 回调函数中直接使用 this.setData() 会报一个错误：this.setData is not a function;

• 因为这里的wx:rewuest()是在页面加载时调用，所以我们可以在 onLoad() 中定义一个变量 that ，将 this 赋值给 that，那么此时的that代表相对于 onLoad() 的当前对象，然后在success回调函数中直接使用 that.setData() 即可；
• 其实this是指向当前实体的一个指针，当处于不同的实体之中时，this指针随即改变，可以看到this在微信开发工具中是以蓝色显示的，是系统变量，因此，在嵌套实体中，需要另外一个变量来操作你所需要操作的实体；
• this 它在程序中随着执行的上下文随时会变化 ，就会找不到原来的对象在哪，解决的办法就是复制一份当前对象， var that=this; //把this对象复制到临时变量that
• currentTab: e.target.dataset.current

---

在使用wx.request时，我们就可以使用 header 来添加请求头部信息，把请求头信息一起传递给服务器；

• 例如，请求www.phpos.net时，就会把这个请求头发送给这网站所在的网址；
• 也就是说我们请求一个网址，实际上一起跟着这个网址传递到服务器的还有 “请求头”；
• 异步请求 json， 接口传回来的参数要是json 格式的，否则会报500错误；
• 微信小程序发送的是https请求，在本地调试时可以用http，如果放在手机上测试时校验请求方式和域名，不合法会错误，但可以勾选小程序 “不校验请求域名及tls版本”；
• data 值就是使用 wx.request 时，url里面的参数，最终发送给服务器的数据是 String 类型，如果不是，则通过 header 转；

函数success：

• 当一个https请求成功时，小程序就会自动触发这个返回成功信息的函数，这个函数是腾讯自己封装好的；
• 这个函数获取的是从开发者服务器返回的数据（一般为json格式），因为，获取到的数据就是我们要渲染到小程序页面的数据；

---

dataType：传输的数据类型- text / json ， 该语句会将服务器端的数据自动转为string类型；

参数名	类型	必填	默认值	说明
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数
header	Object	否		设置请求的 header，header 中不能设置 Referer。
method	String	否	GET	有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType	String	否	json	如果设为json，会尝试对返回的数据做一次 JSON.parse
responseType	String	否	text	设置响应的数据类型。合法值：text、arraybuffer
success	Function	否		收到开发者服务成功返回的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

http.js：

function req(url, data, cb) {
	let server = 'http://192.165.1.189:8080'; //正式域名
    wx.request({
        url: server + url,
        // 请求参数data
        data: data,
        method: 'POST',
        //设置参数内容类型为json
        header: { 'Content-Type': 'application/json' },
        success: function (json) {
            console.log(json);
            typeof cb == "function" && cb(json)
        },
        fail: function () {
        	wx.hideLoading();
            wx.showToast({
                title: '数据获取失败',
                icon: 'none'
            })
        },
        dataType: "json" //传输的数据类型，text / json 该语句会将服务器端的数据自动转为string类型
    });
}

//让函数出去
module.exports = {
    req: req
}

typeof cb == “function” && cb(res.data) ：

• 利用的&&的运算规律，首先判断cb是不是一个方法， 这里的==可以作为类型是否相当的判断，然后在&&中如果前面的不满足，后面的则不会执行；

• 如果是cb是一个方法，调用cb方法，并且传入success成功回调的userinfo参数

• 并且return 的是回调函数，而不是具体的数据

app.js 引用 http.js：

为了其他文件方便调用此方法，我们在根目录的app.js文件中将其注册成为全局函数，如下：

const app = getApp()
const http = require('utils/http.js');
App({
	//全局调用
    func: {
        req: http.req
    }
})

页面调用封装函数：

这时这个req就是全局的了，在调用时我们可以使用getApp.func.req()来调用，具体如下：

var app = getApp(); //获取app里的值，实例化
Page({

    /**
     * 页面的初始数据
     */
    data: {
        currentId: 0,
        emitNumber: 0,
        emitList: [],
    },
    onLoad: function (res) {
        /*
        	var that = this; 
        	1.0\把page对象赋值给新建的对象
        	2.0\重置data{}里数据时 setData 方法的 this 应指向 req() 函数的this,
        		如果在下方的sucess直接写this就变成了wx.request()的this了
        */ 
        var that = this; 
        wx.showToast({
            title: '加载中',
            icon: 'loading',
            duration: 2000
        })
        app.func.req('/redPackets/findRedPacketsDetail', { rid: 1, id: 1 }, function (res) {
            //res相当于ajax里面的返回的数据
            if (res.data.data && res.data.data.packets && res.data.data.receiveLogs) {
                //官方文档指出必须使用setData()方法才能将数据传走
                that.setData({
                    //res赋值
                    emitHead: res.data.data.packets,  //数据集合
                    emitList: res.data.data.receiveLogs
                })
            }
            wx.hideToast();
        });
    },
    //两栏切换：
    clickTab : function(e) {
        var that = this
        var currType = e.currentTarget.dataset.current;
        this.setData({
            currentTab: currType
        })
    }
})