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

微信小程序封装请求

2024-05-16 43

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 微信小程序封装请求

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

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 在小程序页面中使用封装的请求

热门文章

最新文章

相关课程

相关电子书

相关实验场景