微信小程序封装请求-阿里云开发者社区

导语：微信小程序作为一种轻量级的应用开发框架，已经成为许多开发者的首选。在小程序开发中，网络请求是常见的需求之一。为了提高代码的复用性和开发效率，我们可以封装网络请求，使其更加易用和灵活。本文将介绍如何在微信小程序中封装请求，让开发变得更加便捷。

1. 封装请求的优势

在小程序开发中，我们通常需要与后端服务器进行数据交互，包括获取数据、提交表单等。封装请求的优势如下：

1.1 代码复用性

通过封装请求，我们可以将网络请求相关的代码抽离出来，形成一个独立的请求模块。这样，在多个页面中都可以复用这个模块，避免了代码的重复编写，提高了代码的复用性。

1.2 逻辑解耦

将网络请求封装成一个独立的模块，可以使代码逻辑更加清晰和简洁。不同的业务逻辑可以独立处理，降低了模块间的耦合度，提高了代码的可维护性和可测试性。

1.3 错误处理和异常捕获

封装请求的过程中，我们可以加入错误处理和异常捕获的逻辑。这样，在请求发生错误或异常时，我们可以统一处理，并给予用户友好的提示信息，提升了用户体验。

2. 封装请求的实现步骤

接下来，我们将介绍如何在微信小程序中封装请求。

2.1 封装请求方法

首先,新建一个config文件里面新建一个env.config.js 用来存不同环境的BASE_URL

然后，我们可以创建一个request.js，用于封装请求相关的方法。在该文件中，我们可以定义一个函数，用于发送网络请求。这个函数可以接受请求的参数，例如 URL、请求方法、数据等，并返回一个 Promise 对象，用于异步处理请求结果。

const envConf = {
  //本地环境
  develop: {
    mode: 'dev',
    DEBUG: false,
    VCONSOLE: true,
    appid: '换成自己的',
    VUE_APP_BASE_URL: 'https://127.0.0.1:9999',
  },
  //测试环境
  trial: {
    mode: 'dev',
    DEBUG: false,
    VCONSOLE: true,
    appid: '换成自己的',
    VUE_APP_BASE_URL: '换成自己的',
  },
  //开发环境
  release: {
    mode: 'prod',
    DEBUG: false,
    VCONSOLE: false,
    appid: '换成自己的',
    VUE_APP_BASE_URL: '换成自己的',
  }
}

module.exports = {
  env: envConf[__wxConfig.envVersion]
}

const app = getApp();
var tokenKey = "token";
//请求url;引用的是env.config.js中对应环境的
var serverUrl = env.env.VUE_APP_BASE_URL;  
var userInfo = wx.getStorageSync('userInfo');
var tenantid= '1'; //租户Id
if(!userInfo===''){
  tenantid= userInfo.relTenantIds.split(',')[0];
}
import env from '../config/env.config'
// 例外不用token的地址
var exceptionAddrArr = ['/sys/login', ];
//请求头处理函数
function CreateHeader(url, type) {
  let header = {}
  if (type == 'POST_PARAMS') {
    header = {
      'content-type': 'application/x-www-form-urlencoded',
    }
  } else {
    header = {
      'content-type': 'application/json',
    }
  }
  if (exceptionAddrArr.indexOf(url) == -1) { //排除请求的地址不需要token的地址
    let token = wx.getStorageSync(tokenKey);
    // header.Authorization = token;
    //请求头携带token还有租户id
    header['X-Access-Token'] = token; 
    header['tenant-id'] = tenantid;
  }
  return header;
}
//post请求，数据在body中
function postRequest(url, data) {
  let header = CreateHeader(url, 'POST');
  return new Promise((resolve, reject) => {
    wx.request({
      url: serverUrl + url,
      data: {
        ...data,
        tenantId: tenantid
      },
      header: header,
      method: 'POST',
      success: (res => {
        if (res.data && res.data.code === 200) {
          resolve(res)
        }
        //Token失效  跳转至登录页面
        else if (res.data.code === 401) {
          //移除失效token
          wx.removeStorageSync('token')
           //移除失效的用户信息
           wx.removeStorageSync('userInfo')
          //属于tabbar的页面，只能通过wx.switchTab来跳转
          wx.switchTab({
            url: '/pages/my/my',
          })
          console.log("TOKEN失效");
          wx.showToast({
            icon: "none",
            title: (res.data && res.data.message) || "请求失败",
          });

        } else {
          wx.showToast({
            icon: "none",
            title: (res.data && res.data.message) || "请求失败",
          });
          reject(res)
        }
        setTimeout(_ => {
          wx.hideLoading();
        }, 500)
      }),
      fail: (res => {
        wx.hideLoading();
        console.log("err!!!!", err)
        wx.showToast({
          icon: "none",
          title: '请求失败',
        });
        reject(err)
      })
    })
  })
}
//post请求，数据按照query方式传给后端
function postParamsRequest(url, data) {
  let header = CreateHeader(url, 'POST_PARAMS');
  let useurl = url;
  console.log(useurl);
  return new Promise((resolve, reject) => {
    wx.request({
      url: serverUrl + useurl,
      header: header,
      method: 'POST',
      success: (res => {
        if (res.data && res.data.code === 200) {
          resolve(res)
        }
        //Token失效  跳转至登录页面
        else if (res.data.code === 401) {
           //移除失效的用户信息
           wx.removeStorageSync('userInfo')
          //移除失效token
          wx.removeStorageSync('token')
          //属于tabbar的页面，只能通过wx.switchTab来跳转
          wx.switchTab({
            url: '/pages/my/my',
          })
          wx.showToast({
            icon: "none",
            title: (res.data && res.data.message) || "请求失败",
          });

        } else {
          wx.showToast({
            icon: "none",
            title: (res.data && res.data.message) || "请求失败",
          });

          reject(res)
        }
        setTimeout(_ => {
          wx.hideLoading();
        }, 500)
      }),
      fail: (res => {
        wx.hideLoading();
        console.log("err!!!!", err)
        wx.showToast({
          icon: "none",
          title: '请求失败',
        });
        reject(err)
      })
    })
  })
}
//get 请求
function getRequest(url, data) {
  let header = CreateHeader(url, 'GET');
  return new Promise((resolve, reject) => {
    wx.request({
      url: serverUrl + url,
      data: data,
      header: header,
      method: 'GET',
      success: (res => {
         //统一处理响应状态码
        if ((res.data && res.data.code === 200)||res.statusCode===200) {
          resolve(res)
        } //Token失效  跳转至登录页面
        else if (res.data.code === 401) {
           //移除失效的用户信息
           wx.removeStorageSync('userInfo')
          //移除失效token
          wx.removeStorageSync('token')
          //属于tabbar的页面，只能通过wx.switchTab来跳转
          wx.switchTab({
            url: '/pages/my/my',
          })
          wx.showToast({
            icon: "none",
            title: (res.data && res.data.message) || "请求失败",
          });
        } else {
          wx.showToast({
            icon: "none",
            title: (res.data && res.data.message) || "请求失败",
          });

          reject(res)
        }
        setTimeout(_ => {
          wx.hideLoading();
        }, 500)
      }),
      fail: (res => {
        wx.hideLoading();
        console.log("err!!!!", err)
        wx.showToast({
          icon: "none",
          title: '请求失败',
        });
        reject(err)
      })
    })
  })
}
//put请求
function putRequest(url, data) {
  let header = CreateHeader(url, 'PUT');
  return new Promise((resolve, reject) => {
    wx.request({
      url: serverUrl + url,
      data: data,
      header: header,
      method: 'PUT',
      success: (res => {
        if (res.data && res.data.code === 200) {
          resolve(res)
        } //Token失效  跳转至登录页面
        else if (res.data.code === 401) {
               //移除失效的用户信息
               wx.removeStorageSync('userInfo')
          //移除失效token
          wx.removeStorageSync('token')
     
          //属于tabbar的页面，只能通过wx.switchTab来跳转
          wx.switchTab({
            url: '/pages/my/my',
          })
          wx.showToast({
            icon: "none",
            title: (res.data && res.data.message) || "请求失败",
          });
        } else {
          wx.showToast({
            icon: "none",
            title: (res.data && res.data.message) || "请求失败",
          });

          reject(res)
        }
        setTimeout(_ => {
          wx.hideLoading();
        }, 500)
      }),
      fail: (res => {
        wx.hideLoading();
        console.log("err!!!!", err)
        wx.showToast({
          icon: "none",
          title: '请求失败',
        });
        reject(err)
      })
    })
  })
}
//delete请求
function deleteRequest(url, data) {
  let header = CreateHeader(url, 'DELETE');
  return new Promise((resolve, reject) => {
    wx.request({
      url: serverUrl + url,
      data: data,
      header: header,
      method: 'DELETE',
      success: (res => {
        if (res.data && res.data.code === 200) {
          resolve(res)
        } //Token失效  跳转至登录页面
        else if (res.data.code === 401) {
          //移除失效token
          wx.removeStorageSync('token')
           //移除失效的用户信息
           wx.removeStorageSync('userInfo')
          //属于tabbar的页面，只能通过wx.switchTab来跳转
          wx.switchTab({
            url: '/pages/my/my',
          })
          wx.showToast({
            icon: "none",
            title: (res.data && res.data.message) || "请求失败",
          });

        } else {
          wx.showToast({
            icon: "none",
            title: (res.data && res.data.message) || "请求失败",
          });

          reject(res)
        }
        setTimeout(_ => {
          wx.hideLoading();
        }, 500)
      }),
      fail: (res => {
        wx.hideLoading();
        console.log("err!!!!", err)
        wx.showToast({
          icon: "none",
          title: '请求失败',
        });
        reject(err)
      })
    })
  })
}
module.exports.getRequest = getRequest;
module.exports.postRequest = postRequest;
module.exports.postParamsRequest = postParamsRequest;
module.exports.putRequest = putRequest;
module.exports.deleteRequest = deleteRequest;

2.2 接口管理

首先,新建一个api文件，里面新建一个login.js

import { getRequest, postRequest
}  from "../request" //引用刚刚的request
const base = '';
// 登录
export const requst_post_login = data => postRequest(`/sys/login`, data);
//查询角色权限
export const  getUserPermissionByToken= data => getRequest(`/sys/permission/getUserPermissionByToken`, data);

2.2 在小程序页面中使用封装的请求

import {
  requst_post_login,
  getUserPermissionByToken
} from "../../utils/api/login.js"

 //登录请求
  loginFun() {
  const params = {
      username: this.data.username, //用户名
      password: this.data.password,
      captcha: this.data.captcha,
      //无验证码登录
      wxLogin: "1",
    }
    requst_post_login(params).then(res => {
      if (res.data.code === 200) {
        //存储token
        wx.setStorageSync('token', res.data.result.token)
        var token = wx.getStorageSync('token');
        console.log(token);
        //存储用户信息
        wx.setStorageSync('userInfo', res.data.result.userInfo)
        // console.log(wx.getStorageSync('userInfo'));
        //存储角色信息
        wx.setStorageSync('departs', res.data.result.departs)
        this.getUserPermissionByToken();
      }
      // // 跳转首页
      wx.reLaunch({
        url: '/pages/home/home',
      });
    })
  },

微信小程序封装请求

1. 封装请求的优势

1.1 代码复用性

1.2 逻辑解耦

1.3 错误处理和异常捕获

2. 封装请求的实现步骤

2.1 封装请求方法

2.2 接口管理

2.2 在小程序页面中使用封装的请求

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

微信小程序封装请求

1. 封装请求的优势

1.1 代码复用性

1.2 逻辑解耦

1.3 错误处理和异常捕获

2. 封装请求的实现步骤

2.1 封装请求方法

2.2 接口管理

2.2 在小程序页面中使用封装的请求

热门文章

最新文章

相关课程

相关电子书

相关实验场景