前言

微信小程序是一款轻量级的应用平台，提供了丰富的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协议等。总之，封装请求是现代网络应用中非常重要的一个环节。通过良好的封装请求，可以保证数据的安全和可靠性，从而提高应用的性能和用户体验。