微信小程序中网络请求的封装与优化实践
前言
微信小程序是一款轻量级的应用平台，提供了丰富的API和组件来帮助开发者快速构建应用。在进行微信小程序开发时，网络请求同样是不可或缺的环节。为了提高开发效率和代码质量，我们可以封装一些网络请求方法，以便在多个页面中复用，并且可以统一处理错误信息等问题。本文将介绍如何在微信小程序中封装网络请求方法。
正文内容
1、封装 wx.request 请求：
在小程序项目的根目录创建 utils 目录，在目录下创建 request.js 文件，编写以下代码：
[代码]// 全局请求封装
const base_url = 'http://localhost:996';
export default (params) => {
let url = params.url;
let method = params.method || "GET";
let data = params.data || {};
let header = {};
if (method == "POST") {
header = {
'content-type': 'application/json'
};
}
// 获取本地token
const token = wx.getStorageSync("token");
if (token) {
header['Authorization'] = 'Bearer ' + token;
}
return new Promise((resolve, reject) => {
wx.request({
url: base_url + url,
method: method,
header: header,
data: data,
success(response) {
const res = response.data;
if (res.statusCode == 200) {
resolve(res);
} else {
wx.clearStorageSync();
switch (res.statusCode) {
case 401:
wx.showModal({
title: "提示",
content: "请登录",
showCancel: false,
success(res) {
setTimeout(() => {
wx.navigateTo({
url: "/pages/login/index",
});
}, 1000);
},
});
break;
case 404:
wx.showToast({
title: '请求地址不存在...',
duration: 2000,
});
break;
default:
wx.showToast({
title: '请重试...',
duration: 2000,
});
break;
}
}
},
fail(err) {
console.log(err);
if (err.errMsg.indexOf('request:fail') !== -1) {
wx.showToast({
title: '网络异常',
icon: "error",
duration: 2000
});
} else {
wx.showToast({
title: '未知异常',
duration: 2000
});
}
reject(err);
},
complete() {
wx.hideLoading();
wx.hideToast();
}
});
}).catch((e) => {});
};
[代码]
2、封装对应的 api 文件
在实际项目中，我们也会根据上述请求，封装对应的 api，所以，在根目录下创建 api 文件夹，里面放与项目相关的 api：
[代码]// 引入 request 文件
import request from '@/utils/request';
// 以下 api 为示例，实际与项目相匹配
// 分页查询学习列表
export const pageStudyInfo = (params) => {
return request({
url: '/study/studyInfo/page',
method: 'GET',
data: params
});
};
// 查询学习列表
export const listStudyInfo = (params) => {
return request({
url: '/study/studyInfo/list',
method: 'GET',
data: params
});
};
// 获取学习列表详细信息
export const studyInfoById = (id) => {
return request({
url: `/study/studyInfo/${id}`,
method: 'GET',
});
};
// 增加学习列表
export const saveStudyInfo = (params) => {
return request({
url: '/study/studyInfo',
method: 'POST',
data: params
});
};
// 修改学习列表
export const updateStudyInfo = (params) => {
return request({
url: '/study/studyInfo',
method: 'PUT',
data: params
});
};
// 删除学习列表
export const deleteStudyInfo = (id) => {
return request({
url: `/study/studyInfo/delete?id=${id}`,
method: 'DELETE',
});
};
[代码]
3、在相关页面使用封装的 api
[代码]Page({
data: {
studyList: []
},
onLoad: function () {
this.getStudyList();
},
getStudyList: async function () {
try {
const res = await pageStudyInfo(this.data.queryParams);
console.log(res.data.records);
this.setData({
studyList: res.data.records
});
} catch (error) {
console.error(error);
}
}
});
[代码]
总结
封装请求在微信小程序开发中同样非常重要。通过封装请求，我们可以提高数据的安全性、减少网络传输的开销、方便协议的扩展和升级等。在封装请求时，需要考虑请求的类型、格式、大小、传输协议、加密方式等因素。常见的封装请求的方式有URL编码、JSON格式、XML格式、HTTP协议等。总之，封装请求是现代网络应用中非常重要的一个环节。通过良好的封装请求，可以保证数据的安全和可靠性，从而提高应用的性能和用户体验。
