微信小程序封装请求

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

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

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',
      });
    })
  },


相关文章
|
2月前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
25天前
|
小程序 Java
小程序通过get请求提交数据到java后台
小程序通过get请求提交数据到java后台
28 0
|
2月前
|
小程序 PHP
微信小程序给 thinkphp后端发送请求出现错误 Wrong number of segments 问题的解决 【踩坑记录】
本文记录了微信小程序向ThinkPHP后端发送请求时出现"Wrong number of segments"错误的解决方法。问题原因是小程序请求header中的token变量名写错,导致token未正确传递至后端。作者提供了详细的检查步骤和建议,包括验证URL路径、参数规范和路由配置的匹配,以确保请求能正确发送和处理。
|
3月前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
3月前
|
小程序 安全
Fiddler抓取小程序后端请求导入AppScan扫描快捷方法
【8月更文挑战第26天】这是一种利用 Fiddler 捕获小程序后端请求并导入 AppScan 进行安全扫描的方法。首先安装配置 Fiddler 并设置手机代理,通过 Fiddler 捕获请求;接着导出这些请求为 .saz 文件,并在 AppScan 中导入此文件,配置扫描参数后启动扫描以检测安全漏洞。操作时需确保有合法授权并遵循相关法规。尽管不同版本软件操作细节可能有所不同,但整体流程类似。
121 1
|
5月前
|
开发工具
微信客服系统开发SDK使用教程- 拉取当前微信个人号列表请求(立即)
微信客服系统开发SDK使用教程- 拉取当前微信个人号列表请求(立即)
|
4月前
|
小程序 C++
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
68 0
|
4月前
|
小程序 定位技术 开发工具
【微信小程序-原生开发+TDesign】通用功能页封装——地点搜索(含腾讯地图开发key 的申请方法)
【微信小程序-原生开发+TDesign】通用功能页封装——地点搜索(含腾讯地图开发key 的申请方法)
50 0
|
15天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
233 7
|
15天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
313 1