对 小程序 request 请求封装！

前言

在小程序(其他)开发过程中,我们会遇到很多请求，如果每次都去写一遍，不方便维护，就搞了这个封装
wx.request 请求官方文档
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

request的基本参数

1、URL (请求地址)

一般 url 都是有一个固定前缀(域名),只是后面不同

https://xxxxxx.com/api/login
https://xxxxxx.com/api/goodList
https://xxxxxx.com/api/User
...

设置一个全局常量baseUrl用来存储前缀（便于维护）

const baseUrl='https://some-domain.com/api/'

2、method（HTTP 请求方法）

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

3、header（请求头）

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

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

封装的代码

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

const baseURL = 'https://some-domain.com/api/';

function request(method, url, data) {
    return new Promise(function(resolve, reject) {
        let header = {
            'content-type': 'application/json',
        };
        wx.request({
            url: baseURL + url,
            method: method,
            data: method === POST ? JSON.stringify(data) : data,
            header: header,
            success(res) {
                //请求成功
                //判断状态码---errCode 状态根据后端定义来判断
                if (res.data.errCode == 0) {
                    resolve(res);
                } else {
                    //其他异常
                    reject('运行时错误,请稍后再试');
                }
            },
            fail(err) {
                //请求失败
                reject(err)
            }
        })
    })
}

使用

1、新建api.js,并将上述代码放进去，然后创建请求,并导出（以获取openid接口为例）

//衔接上面的封装代码

const API = {
    getOpenid: (data) => request(GET, `jsapi/mini?jsCode=${data}`),
};
module.exports = { 
    API: API
}

2、在.js文件里引入api.js下的API

const $api = require('../../utils/api.js').API;
Page({
    data: {},
    onLoad: function (options) {
        wx.login({
            success:res=> {
                // 调用接口获取openid
                $api.getOpenid(res.code)
                    .then(res => {
                       //请求成功
                    })
                    .catch(err => {
                       //请求失败
                    })
            }
        })
    }
})