微信小程序封装请求的地址（IP地址以及端口）和方法

概述

项目开发时和上线时请求的IP地址和端口是不一样的，为了避免后期修改请求的IP地址和端口带来的麻烦，非常有必要把请求的IP地址和端口封装起来，另外，还可以使用Promise封装一下请求的方法和使用async和await关键字以避免回调地狱

实现过程

在根目录下新建一个名为utils的文件夹（和pages同级），在一个名为requestUtil.js的文件，请求的IP地址以及端口和方法都封装在里面

封装请求的IP地址和端口

代码如下，在这里可以统一管理项目请求的IP地址和端口，后期要修改的话只需要改这个地方即可

//定义请求的IP地址和端口
const baseUrl = 'http://localhost:8080';

//返回baseUrl
export const getBaseUrl = () => {
    return baseUrl;
}

在使用前，要先在页面的js文件中引入，然后在原始数据中定义（空值），最后在onLoad()函数中设置就可以使用了

// 引入请求后端工具类
import {getBaseUrl} from '../../utils/requestUtil.js'
Page({
    data: {
        baseUrl: ''
    },
    onLoad() {
        const baseUrl = getBaseUrl();
        this.setData({
            baseUrl
        })
    }
})

封装请求的方法

代码如下（加上IP地址和端口的封装），params接收传过来的url和method等参数，baseUrl是请求的IP地址和端口（传过来的url就不需要写IP地址和端口了）

//定义请求的IP地址和端口
const baseUrl = 'http://localhost:8080';

//返回baseUrl
export const getBaseUrl = () => {
    return baseUrl;
}

/**
 * 后端请求工具
 * @param {*} params 
 */
export const requestUtil = (params) => {
    return new Promise((resolve, reject) => {
        wx.request({
            ...params,
            url: baseUrl + params.url,
            success: (res) => {
                resolve(res)
            },
            fail: (err) => {
                reject(err)
            }
        })
    });
}

使用前先在页面的js文件中引入

import {getBaseUrl,requestUtil} from '../../utils/requestUtil.js'

使用的格式如下，使用了async和await关键字以避免回调地狱和保证代码按顺序执行（有await关键字的请求执行完才会执行下面的代码），注释掉的是微信小程序原来的请求方法（没封装前直接使用wx.request方法）

async getRecommendGoodsList() {
	// wx.request({
	//     url: 'http://localhost:8080/goods/getRecommendGoodsList',
	//     method: 'GET',
	//     success(res) {
	//         this.setData({
	//             recommendGoodsList: res.data.goodsList
	//         })
	//     }
	// })
	const res = await requestUtil({
		url: 'http://localhost:8080/goods/getRecommendGoodsList',
		method: 'GET'
	});
	this.setData({
		recommendGoodsList: res.data.goodsList
	})
}

要让微信小程序支持async和await关键字，还要勾选上将JS编译成ES5，具体步骤查看下图

PS.

不使用async和await关键字的用法示例如下所示

requestUtil({
	url: 'http://localhost:8080/goods/getRecommendGoodsList',
	method: 'GET'
}).then(res => {
	//请求成功
}).catch(err => {
	//请求失败
})