.env定义环境

• 在目录中定义env.js文件定义api环境 如下： http/env.js

module.exports = {
    // 开发版
    develop: {
        baseUrl: 'https://developers.com/h5',
    },
    // 体验版
    trial: {
        baseUrl: 'https://developers.com/h5-trial',
    },
    // 正式版
    release: {
        baseUrl: 'https://developers.com/h5-release',
    },
}

封装request请求

• 在http文件夹下封装request请求 如下： http/request.js

module.exports = {
    request: function (url, data = {}, method = 'GET') {
    // 此处baseUrl需要从定义的env.js文件中import
    let fullUrl = `${baseUrl}${url}`;
        wx.showLoading({
             title: '加载中',
            })
    // 使用Promise封装一层
        return new Promise((resolve, reject) => {
            wx.request({
                url: fullUrl,
                method,
                data,
                header: {
                    'Content-type': 'application/json'
                },
                // 成功的回调函数
                success(res) {
                    if (res.statusCode === 200) {
                    // 将response的数据resolve出去
                        resolve(res.data)
                        wx.hideLoading()
                    } else {
                        wx.showToast({
                                title: '请求失败',
                                icon: 'error'
                            })
                        reject(res);
                    }
                },
                fail(error) {
                    wx.showToast({
                        title: '请求失败',
                        icon: 'error'
                    })
                    reject(error);
                }
            })
        })
    },
}

• 这样就完成了 request的封装，接下来就是请求调用了
• 如果此处有更多的statusCode需要处理，只需要在判断中进行或者switch写就可以了

定义项目的请求分类文件和使用方法 http/index.js

const { request } = require('../http/request');
module.exports = {
    /**
    * 定义了微信授权登录接口
    * request (请求路径，请求参数)
    */
    
    api_userLogin: (params) => request('/wx/code', {
        ...params
    })

• 如此请求就定义完整了，如果请求过多，可以将请求分类存放，如用户信息相关，业务相关等。

使用

const { api_userLogin } = require("../../http/index");
// 调取用户信息
   getUserInfo(options) {
  // 简单的调用方式，此处应先调用wx接口获取code
                var params = { code }
                return api_userLogin(params)
    }

• 好了，到这里就都结束了，希望可以帮助到大家，有问题的地方也请大家多多指正！