1. 前言
本文主要介绍如何在微信小程序项目中封装http请求，使得请求的代码更加简洁易读，同时也更加易于维护。在实际项目中，http请求几乎是每个小程序项目中都必须用到的一个功能，因此封装http请求并不仅仅是提高代码可读性和可维护性的问题，更是提高开发效率和代码质量的必要措施。
2. 项目构建
在开始封装http请求之前，我们需要先构建一个完整的小程序项目，这样才能够在真实的项目环境中进行封装和调用。以下是小程序项目构建的基本步骤：
2.1 创建项目
首先，在微信开发者工具中创建一个新项目，需要填写以下信息：
项目名称
AppID
项目目录
所使用的开发语言（JavaScript 或 TypeScript）
2.2 配置项目
项目创建完成后，需要在 app.json 文件中配置项目基本信息，如标题、窗口背景色、导航栏样式等。
{
"navigationBarTitleText": "小程序名称",
"backgroundColor": "#F8F8F8",
"navigationBarBackgroundColor": "#F8F8F8",
"navigationBarTextStyle": "black"
}
2.3 创建页面
完成项目配置后，需要创建小程序页面，可以通过微信开发者工具的菜单栏或右侧侧边栏中的“＋”按钮创建页面模板。创建完成后，在 app.json 文件中配置页面路径和导航栏标题。
{
"pages": [
"pages/index/index",
"pages/detail/detail"
],
"window": {
"navigationBarTitleText": "小程序名称"
}
}
3. http请求封装
http请求封装是一个非常具有技术含量和实用价值的问题，本文将从以下几个方面介绍如何对http请求进行封装：
3.1 基础http请求封装
在小程序中进行http请求，通常使用的是 wx.request 方法，该方法具有以下几个参数：
url：请求的URL
data：请求携带的参数
method：请求的方法（GET、POST等）
dataType：响应的数据类型（json、text等）
success：请求成功后的回调函数
fail：请求失败后的回调函数
以下是一个简单的http请求示例：
wx.request({
url: 'https://example.com/api/getUserInfo',
data: {
userId: 1
},
success: function(res) {
console.log(res.data);
}
})
每次使用 wx.request 方法都需要传递以上的参数，如果在多个地方频繁使用该方法，会使得代码显得非常冗长和繁琐，因此，需要对 wx.requeset 方法进行封装，以便在应用中更加方便地使用。以下是基础http请求封装的示例代码：
function request(url, data, method, dataType) {
return new Promise((resolve, reject) => {
wx.request({
url: url,
data: data,
method: method || 'GET',
dataType: dataType,
header: {
'content-type': 'application/json'
},
success: function(res) {
resolve(res.data);
},
fail: function(error) {
reject(error);
}
})
})
}
在上述代码中，我们对 wx.request 方法进行了封装，并将其包装为一个 Promise，以便在程序中更加方便地使用。调用该方法的示例代码如下：
const baseUrl = 'https://example.com/api/';
request(baseUrl + 'getUserInfo', { userId: 1 }, 'GET')
.then(function(res) {
console.log(res);
})
.catch(function(error) {
console.log(error);
});
在该示例中，我们首先定义了一个 baseUrl 常量，然后通过调用 request 方法进行 http 请求，并设置请求的参数和回调函数。这样一来，我们就可以在代码中更加方便地使用 http 请求函数了。
3.2 错误处理封装
在实际项目中，http请求不可能总是成功的，很多时候请求会遇到各种错误，比如网络错误，服务器错误等。因此，在封装http请求时，我们还需要考虑如何处理错误。以下是一个简单的错误处理示例：
function request(url, data, method, dataType) {
return new Promise((resolve, reject) => {
wx.request({
url: url,
data: data,
method: method || 'GET',
dataType: dataType,
header: {
'content-type': 'application/json'
},
success: function(res) {
if (res.statusCode === 200) {
resolve(res.data);
} else {
reject({ code: res.statusCode, message: res.errMsg });
}
},
fail: function(error) {
reject(error);
}
})
})
}
在上述代码中，如果请求成功且状态码为200，则调用resolve()方法返回请求的数据；否则，调用reject()方法返回错误信息。调用该方法的示例代码如下：
const baseUrl = 'https://example.com/api/';
request(baseUrl + 'getUserInfo', { userId: 1 }, 'GET')
.then(function(res) {
console.log(res);
})
.catch(function(error) {
console.log(error);
});
在该示例中，我们添加了一个错误处理函数，并对错误进行了统一处理。这样一来，在应用中更加方便地对 http 请求的错误进行处理。
3.3 加载中提示封装
在页面中进行http请求时，经常需要在请求数据的过程中显示加载中提示。因此，对于http请求的封装中，我们也需要加入加载中提示的功能。以下是一个简单的加载中提示封装的示例：
function request(url, data, method, dataType) {
wx.showLoading({
title: '加载中...',
mask: true
});
return new Promise((resolve, reject) => {
wx.request({
url: url,
data: data,
method: method || 'GET',
dataType: dataType,
header: {
'content-type': 'application/json'
},
success: function(res) {
wx.hideLoading();
if (res.statusCode === 200) {
resolve(res.data);
} else {
reject({ code: res.statusCode, message: res.errMsg });
}
},
fail: function(error) {
wx.hideLoading();
reject(error);
}
})
})
}
在上述代码中，我们使用了 wx.showLoading() 和 wx.hideLoading() 方法来展示和隐藏加载中提示。调用该方法的示例代码如下：
const baseUrl = 'https://example.com/api/';
request(baseUrl + 'getUserInfo', { userId: 1 }, 'GET')
.then(function(res) {
console.log(res);
})
.catch(function(error) {
console.log(error);
});
在该示例中，我们在请求数据之前使用了 wx.showLoading() 方法显示加载中提示，并在请求数据完成后使用 wx.hideLoading() 方法隐藏加载中提示。这样一来，在页面中也可以方便地显示加载中提示了。
3.4 封装http请求模块
在将以上三个功能组合起来之后，我们就可以对http请求进行完整的封装了。以下是一个基于以上三个功能封装的http请求模块：
const baseUrl = 'https://example.com/api/';
function request(url, data, method, dataType) {
wx.showLoading({
title: '加载中...',
mask: true
});
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + url,
data: data,
method: method || 'GET',
dataType: dataType,
header: {
'content-type': 'application/json'
},
success: function(res) {
wx.hideLoading();
if (res.statusCode === 200) {
resolve(res.data);
} else {
reject({ code: res.statusCode, message: res.errMsg });
}
},
fail: function(error) {
wx.hideLoading();
reject(error);
}
})
})
}
function get(url, data, dataType) {
return request(url, data, 'GET', dataType);
}
function post(url, data, dataType) {
return request(url, data, 'POST', dataType);
}
module.exports = {
request: request,
get: get,
post: post
}
在上述代码中，我们将 baseUrl 和 request 方法定义为模块内部变量和函数，并对 get() 和 post() 方法进行了封装。调用该模块的示例代码如下：
const http = require('./http.js');
const baseUrl = 'https://example.com/api/';
http.get(baseUrl + 'getUserInfo', { userId: 1 })
.then(function(res) {
console.log(res);
})
.catch(function(error) {
console.log(error);
});
在该示例中，我们引用了该http请求模块，并以 baseUrl 为参数调用了 get() 方法，从而向服务器发送了一个 GET 请求。通过将http请求封装成模块，我们可以进一步提高代码的可读性和可维护性。
4. 结语
http请求封装是一个非常重要且必须掌握的技能，可以帮助我们提高开发效率，提升代码质量和可读性。在实际项目中，http请求通常会伴随着许多其他的功能，如错误处理、加载中提示等。因此，在编写http请求封装时一定要考虑到这些情况，并根据实际需要进行必要的封装。本文提供的基础http请求封装、错误处理封装、加载中提示封装和完整http请求模块封装可以作为参考，希望能够为读者在实际开发中提供帮助。