微信小程序封装request请求

前言

在小程序（其他）开发过程中，我们会遇到很多请求，如果每次都去写一遍。尤其是同一个接口好几个地方都要使用，有一点变动就需要全部找出来一个一个改，很不方便维护。所以我们就封装一下，统一管理吧~

wx.request({
    url: 'test.php', // 仅为示例，并非真实的接口地址
    data: {
        x: '',
        y: ''
    },
    header: {
        'content-type': 'application/json' // 默认值
    },
    success(res) {
        console.log(res.data)
    },
    fail(err) {
        console.log(err)
    }
})

封装

1、url（请求地址）
一般url都是有一个固定前缀（域名），只是后面不同。
例如：

https://domain.com/api/test1
https://domain.com/api/test2
https://domain.com/api/test3
https://domain.com/api/test4
...

所以我们在小程序根目录下新建config.js，设置一个全局常量apiURL用来存储前缀。

const config = {
    apiURL: 'https://domain.com/api'
}
module.exports = config

2、method（HTTP 请求方法）

const GET = 'GET';
const POST = 'POST';
const PUT = 'PUT';
const FORM = 'FORM';
const DELETE = 'DELETE';

3、header（请求header）
header的话根据method设置就行了，默认。

header = {
    'content-type': 'application/json',
};

4、data（参数）
get请求直接传就可以了
post请求JSON.stringify(data)一下

5、在小程序util文件夹下新建request.js，并将下面代码放进去。

const $config = require('../config');
const baseURL = $config.apiURL;
const Request = (method, url, data, hasCookie) => {
    return new Promise(function (resolve, reject) {
        let header = {
            'content-type': 'application/json',
        };
        /* 解决sessionid不一致的问题 */
        if (!hasCookie) {
            header['cookie'] = wx.getStorageSync("sessionid")
        };
        wx.request({
            url: baseURL + url,
            method: method,
            data: method === 'POST' ? JSON.stringify(data) : data,
            header: header,
            success(res) {
                //请求成功
                //判断状态码---errCode状态根据后端定义来判断
                if (res.data.status) {
                    resolve(res);
                } else {
                    //其他异常
                    reject('运行时错误,请稍后再试');
                }
            },
            fail(err) {
                //请求失败
                reject(err)
            }
        })
    })
}

module.exports = Request

使用

1、在小程序util文件夹下新建api.js，并将下面代码放进去，然后创建请求，并导出。

const $request = require('./request');
const GET = 'GET';
const POST = 'POST';
const PUT = 'PUT';
const FORM = 'FORM';
const DELETE = 'DELETE';
const Api = {
    getList: (data) => $request(GET, '/getList', data), //获取列表数据
    getDeatil: (data) => $request(GET, '/getDetail', data) //获取详情数据
    getOpenId: (data) => $request(GET, '/getOpenId', data, false), //登录,该请求不携带cookie请求
}

module.exports = Api

2、这里我们以获取列表数据接口为例，在.js文件里引入api.js

const $api = require('../../utils/api.js');
Page({
    data: {},
    onLoad: function (options) {
        this.getData();
    },
    getData() {
        let sendData = {
            siteId: 1,
            page: 1,
            pageSize: 20
        };
        $api.getList(sendData).then(res => {
            //请求成功
            console.log(res.data);
        }).catch(err => {
            //请求失败
            console.log(err);
        });
    }
})

3、解决sessionid不一致的问题，在登录时获取返回的报文里sessionId数据，把这个Set-Cookie的值进行本地存储，以便后面调用。

const $api = require('../../utils/api.js');
Page({
    data: {
        userInfo: []
        hasUserInfo: false
    },
    onLoad: function (options) {
        this.getOpenId();
    },
    getOpenId: function () {
        wx.login({
            success: res => {
                // 发送 res.code 到后台换取 openId, sessionKey, unionId
                let code = res.code;
                $api.getOpenId({ code }).then(res => {
                    let openid = res.data.openid;
                    /* 根据后台返回字段hasUserInfo的值判断是否是网站会员 */
                    if (!res.data.hasUserInfo) {
                        wx.showModal({
                            title: '提示',
                            content: '您还不是该网站的会员，请先注册。',
                            success: (res) => {
                                if (res.confirm) {
                                    wx.navigateTo({
                                        url: `/pages/register/register?openId=${openid}`
                                    })
                                }
                            }
                        })
                    }else {
                        this.setData({
                            userInfo: res.data.data,
                            hasUserInfo: true
                        });
                        app.globalData.userInfo = res.data.data;
                        wx.removeStorageSync('sessionid'); //清除sessionId，否则res.header['Set-Cookie']会报错
                        wx.setStorageSync("sessionid", res.header["Set-Cookie"]);
                    }
                }).catch(err => {
                    console.error(err);
                });
            }
        })
    }
})