微信小程序封装请求

最新推荐文章于 2024-04-06 20:30:52 发布
最新推荐文章于 2024-04-06 20:30:52 发布
阅读量1.9k 收藏 7
点赞数 2
分类专栏： 微信小程序 文章标签： 微信小程序 notepad++ 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45213266/article/details/131837072
版权

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

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',
      });
    })
  },
咕噜咕噜wy
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序HTTP请求从0到1封装
10-16
主要给大家介绍了关于微信小程序HTTP请求从0到1封装的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
微信小程序请求封装
02-25
封装的一个request的请求，用的时候只需要引入，然后把参数写进去，把地址写进去就好。
【知识点】微信小程序网络请求封装必须知道的九件事
最新发布
程序员云阶的博客
04-06 814
此文章主要解析微信网络请求封装的整体逻辑和使用规范📒。希望这篇文章能够对大家有所启示跟帮助👇👇
微信小程序开发--网络请求封装
shi450561200的博客
05-10 1360
其中 url： 为请求的后台接口地址；data： 为请求接口需要携带的参数；header：设置请求的 header，content-type 默认为 application/json，success： 为请求成功后的回调，res包含请求成功后返回的数据。更多关于 wx.request的用法可以查看官方介绍。RequestTask | 微信开放文档那既然官方已经提供有api，为什么还需要进行二次封装呢？
微信小程序封装请求接口
weixin_42955958的博客
10-16 882
目的 因为之前一直在使用vue开发，相较于微信小程序的wx.request里面的回调，还是感觉async和await使用起来比较方便，是以想继续使用此方法进行操作。同时，因为每次后端接口请求都要携带上token,为了方便操作，将其进行封装，使之每次请求自动加上token，简便编程 实现过程 api.js 主要参考： 微信小程序的异步请求/ promise封装 / async&await改造 Await 修饰的对象一定要返回一个 promise 对象 而wx.request并不符合这一规定。 a.
关于微信小程序：封装请求
m0_55546349的博客
04-19 2454
新建一个文件夹request（随便起） 新建env.js 2.1 在这里，配置接口地址的公共地址部分、方便后续引用。 //这里使用的接口呢都是自己模拟的，可以根据自己的需求进行添加 module.exports={ //开发环境的url dev:{ baseUrl:"http://xxxx" }, //测试环境url test:{ // baseUrl:"http:..
微信小程序网络请求封装
每天都要努力学习哦~~
10-11 2840
网络请求地址放到url.js中，分别制定开发环境，体验环境，线上环境网络请求的方法放到request.js中，暴露get、post、wxLogin方法请求前显示加载中，请求结束后隐藏加载中请求的接口方法，放到api.js中，并调用request.js中对应的方法。
微信小程序-封装请求API——promise方式
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-24 7774
微信小程序原生的请求API就是wx.request wx.request({ url: 'example.php', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) } }) 有时候不能很好的适配我们的开发需求，比如我们要加一
微信小程序网络请求封装示例
10-18
主要介绍了微信小程序网络请求封装示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序request请求封装，验签代码实例
10-15
主要介绍了微信小程序request请求封装，验签代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序封装api请求步骤
geng97280的博客
01-28 3356
微信小程序封装api请求步骤
微信小程序 --- wx.request网络请求封装
每天都要努力学习哦~~
02-22 4739
为了方便统一处理请求参数以及服务器响应结果，为WxRequest添加拦截器功能，拦截器包括请求拦截器和响应拦截器请求拦截器本质上是在请求之前调用的函数，用来对请求参数进行新增和修改响应拦截器本质上是在响应之后调用的函数，用来对响应数据做点什么注意：不管成功响应还是失败响应，都会执行响应拦截器// 请求拦截器// 在发送请求之前做些什么// 响应拦截器// 对响应数据做点什么通过使用方式，我们可以得出结论：可以在WxRequest类内部定义实例属性，属性中需要包含request以及。
小程序封装请求
F19980825901的博客
08-09 560
小程序封装请求
详解微信小程序网络请求接口封装
风口浪尖的猪吖
01-06 1318
为实现定制要求和方便调用，对微信小程序的网络请求接口进行了封装 在根目录新建api文件夹并新建httpRequest.js与config.js文件 1.设置请求域名 // 设置请求域名 let ENV = __wxConfig.envVersion let httpUrl = '', if (ENV == 'develop') { // 测试版开发环境域名 httpUrl = 'https://*******.com/api'; } else if (ENV == 'trial') { // /
小程序接口请求封装方法
weixin_43285861的博客
08-29 1984
小程序接口请求封装方法
微信小程序封装网络请求代码详细解析
06-13
好的，我会为您详细解析微信小程序封装网络请求代码。 微信小程序中的网络请求有两种方式：一种是使用内置的wx.request()函数，另一种是使用第三方库进行封装。下面我们来介绍一下如何封装网络请求代码。 1. 创建一个request.js文件 首先，我们需要在项目目录下创建一个request.js文件。该文件用于封装网络请求代码。 2. 封装网络请求代码 在request.js文件中，我们可以使用Promise对象来封装网络请求代码。下面是一个基本的封装代码： ``` function request(url, method, data) { return new Promise((resolve, reject) => { wx.request({ url: url, method: method, data: data, success: function (res) { resolve(res.data); }, fail: function (error) { reject(error); } }) }) } module.exports = { request: request } ``` 上面的代码中，我们定义了一个request函数，它接受三个参数：url、method和data。其中，url表示请求的地址，method表示请求的方法（GET或POST），data表示请求的参数。 该函数返回一个Promise对象，当请求成功时，调用resolve方法并传递返回的数据；当请求失败时，调用reject方法并传递错误信息。 3. 在页面中使用封装代码 在页面中使用封装的网络请求代码非常简单。我们只需要在页面的js文件中引入request.js文件，并调用request函数即可。下面是一个示例代码： ``` const request = require('../../utils/request.js'); Page({ data: { list: [] }, onLoad: function () { this.getList(); }, getList: function () { let url = 'https://xxx.xxx.xxx'; // 请求地址 let method = 'GET'; // 请求方法 let data = {}; // 请求参数 request.request(url, method, data) .then(res => { this.setData({ list: res }) }) .catch(error => { console.log(error); }) } }) ``` 上面的代码中，我们在onLoad函数中调用getList函数，该函数使用request函数发起网络请求。当请求成功时，将返回的数据存储到list中；当请求失败时，打印错误信息。 以上就是微信小程序封装网络请求代码的详细解析。希望对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咕噜咕噜wy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值