小程序请求封装、使用

最新推荐文章于 2024-06-13 09:12:56 发布
最新推荐文章于 2024-06-13 09:12:56 发布
阅读量1.8k 收藏 5
点赞数 1
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50206068/article/details/131311571
版权
该文介绍了如何在小程序中封装网络请求，包括wx.request、wx.showModal和wx.showLoading的使用。通过定义常量和方法，实现了请求的统一处理，包括错误提示、登录过期的重新登录逻辑以及GET和POST请求的封装。同时，文章还展示了登录方法和获取当前页面URL的方法。
摘要由CSDN通过智能技术生成

小程序请求封装

在这里插入图片描述

1、要了解方法

1.1、wx.request()

wx.request 发起 HTTPS 网络请求。（详情点击wx.request查看官方文档）

1.2、wx.showModal()

wx.showModal 显示模态对话框。（详情点击wx.showModal查看官方文档）

1.3、wx.showLoading()

wx.showLoading 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框。（详情点击wx.showLoading查看官方文档）

2、封装

2.1 定义常量信息

const baseUrl = 'https://xxx.xxx.cn';
const SUCCESS_CODE = "0" 
const FAIL_CODE = "-1"
const EXPIRE_CODE = "300001"
// 不需要携带 sessionKey 的白名单
const urlList = [
  '/wxMall/weixin/api/user/login'
]

2.2 封装方法

2.2.1 封装showModal方法

展示错误信息

/**
 * 提示框 方法
 * @param {String} msg 展示信息
 * @param {Function} confirm 点击确定的回调函数
 */
function showModal(msg, confirm,confirmText = "确定") {
  wx.showModal({
    title: '提示',
    content: msg,
    showCancel: false,
    confirmText,
    success: res => {
      if (res.confirm) confirm()
    }
  })
}
2.2.2 封装request方法

发起 HTTPS 网络请求

function request(url, method = "GET", data = {}, config) {
  wx.showLoading({
    title: '加载中',
    mask: true
  })
  // 设置请求头
  const header = {
    'content-type': 'application/json',
    ...config
  };

  // 需要加 sessionKey 的 url，将白名单中url过滤掉
  const requiresToken = !urlList.some(s => url.includes(s));
  if (requiresToken) header["wx-session"] = wx.getStorageSync('sessionKey');

  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + url,
      method,
      header,
      data, 
      success: res => {
        if (res.data.code === SUCCESS_CODE) resolve(res.data);
      },
      complete: err => {
        // 关闭loading
        wx.hideLoading();
        // 登录过期时，重新登录
        if (err.data.code === EXPIRE_CODE) {
          wx.removeStorageSync('sessionKey')
          wx.removeStorageSync('authorize')
          showModal(err.data.message, async () => {
            await wxLogin()
            wx.redirectTo({
              url: `/${getCurPageUrl()}`,
            })
          }, "登录")
        }
        // 正常的错误信息展示
        if (err.data.code === FAIL_CODE)  showModal(err.data.message, () => {})
      }
    })
  })
}
2.2.3 封装get方法
/**
 * GET请求封装
 * @param {String} url 请求地址
 * @param {object} data 请求入参
 * @param {object} config 请求配置 header，如 content-type
 */
const get = (url, data = {}, config = {}) => request(url, "GET", data, config)
2.2.4 封装post方法
/**
 * POST请求封装
 * @param {String} url 请求地址
 * @param {object} data 请求入参
 * @param {object} config 请求配置 header，如 content-type
 */
const post = (url, data = {}, config = {}) => request(url, "POST", data, config)
2.2.5 封装 login 方法

登录微信

function wxLogin() {
  return new Promise((resolve, rejext) => {
    // 登录
    wx.login({
      success: async res => {
        const { data: {sessionKey, authorize} } = await post(
          `/wxMall/xxx/api/xxx/login/${res.code}`, 
          null, 
          {
          	"content-type": "application/x-www-form-urlencoded"
        	}
        )
        wx.setStorageSync('sessionKey',sessionKey);
        wx.setStorageSync('authorize', authorize);
        resolve()
      }
    })
  })
}
2.2.6 封装 getCurPageUrl 方法

获取当前页面url信息

function getCurPageUrl() {
  const pages = getCurrentPages(); // 获取加载的页面
  const curPage = pages[pages.length - 1]; // 获取当前页面的对象
  const options = Object.entries(curPage.options);
  const params = options.map(([key, value]) => `${key}=${value}`).join('&');
  const url = `${curPage.route}?${params}`;
  return url;
}

3、完整封装

在项目中创建api文件夹 用于放 request.js(请求封装) 和 index.js(api封装)

request.js

const baseUrl = 'https://xxx.xxx.cn';
const SUCCESS_CODE = "0" 
const FAIL_CODE = "-1"
const EXPIRE_CODE = "300001"
// 不需要携带 sessionKey 的白名单
const urlList = [
  '/wxMall/xxx/api/xxx/login'
]

/**
 * 提示框 方法
 * @param {String} msg 展示信息
 * @param {Function} confirm 点击确定的回调函数
 */
function showModal(msg, confirm,confirmText = "确定") {
  wx.showModal({
    title: '提示',
    content: msg,
    showCancel: false,
    confirmText,
    success: res => {
      if (res.confirm) confirm()
    }
  })
}

/**
 * 获取当前页面url 方法
 */
function getCurPageUrl() {
  const pages = getCurrentPages(); // 获取加载的页面
  const curPage = pages[pages.length - 1]; // 获取当前页面的对象
  const options = Object.entries(curPage.options);
  const params = options.map(([key, value]) => `${key}=${value}`).join('&');
  const url = `${curPage.route}?${params}`;
  return url;
}

function wxLogin() {
  return new Promise((resolve, rejext) => {
    // 登录
    wx.login({
      success: async res => {
        const { data: {sessionKey, authorize} } = await post(
          `/wxMall/xxx/api/xxx/login/${res.code}`, 
          null, 
          {
          	"content-type": "application/x-www-form-urlencoded"
        	}
        )
        wx.setStorageSync('sessionKey',sessionKey);
        wx.setStorageSync('authorize', authorize);
        resolve()
      }
    })
  })
}

function request(url, method = "GET", data = {}, config) {
  wx.showLoading({
    title: '加载中',
    mask: true
  })
  // 设置请求头
  const header = {
    'content-type': 'application/json',
    ...config
  };

  // 需要加 sessionKey 的 url，将白名单中url过滤掉
  const requiresToken = !urlList.some(s => url.includes(s));
  if (requiresToken) header["wx-session"] = wx.getStorageSync('sessionKey');

  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + url,
      method,
      header,
      data, 
      success: res => {
        if (res.data.code === SUCCESS_CODE) resolve(res.data);
      },
      complete: err => {
        // 关闭loading
        wx.hideLoading();
        // 登录过期时，重新登录
        if (err.data.code === EXPIRE_CODE) {
          wx.removeStorageSync('sessionKey')
          wx.removeStorageSync('authorize')
          showModal(err.data.message, async () => {
            await wxLogin()
            wx.redirectTo({
              url: `/${getCurPageUrl()}`,
            })
          }, "登录")
        }
        // 正常的错误信息展示
        if (err.data.code === FAIL_CODE)  showModal(err.data.message, () => {})
      }
    })
  })
}

/**
 * GET请求封装
 * @param {String} url 请求地址
 * @param {object} data 请求入参
 * @param {object} config 请求配置 header，如 content-type
 */
const get = (url, data = {}, config = {}) => request(url, "GET", data, config)

/**
 * POST请求封装
 * @param {String} url 请求地址
 * @param {object} data 请求入参
 * @param {object} config 请求配置 header，如 content-type
 */
const post = (url, data = {}, config = {}) => request(url, "POST", data, config)


module.exports = {
  get,
  post,
  wxLogin
}

index.js

const {
  get,
  post
} = require("./request")

const config = {
  "content-type": "application/x-www-form-urlencoded"
}
const api = {

  // 授权接口
  authorizeLogin: data => post(`/wxMall/xxx/api/xxx/authorizeLogin`, data),

  // 权益销售列表
  rightsSaleList: data => get(`/wxMall/xxx/list`, data, config),

  // 权益订单列表
  rightsOrderList: data => get(`/wxMall/xxx/list`, data),

  ...

};
module.exports = {
  ...api
}

4、使用

// 引入
const { rightsSaleList } = require("../../api/index")


Page({
  data:{
    pageNum: 1, 
    pageSize: 10, 
  },
  async getList(){
    const { pageNum, pageSize } = this.data;
    const params = { pageNum, pageSize};
    // 使用
    const res = await rightsSaleList(params);
    console.log(res)
  }
})
太阳与我肩并肩
关注
专栏目录
微信小程序网络请求封装
海阔天空
12-30 574
微信网络请求封装
微信小程序HTTP请求封装
2401_84092694的博客
04-23 849
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
微信小程序请求封装
weixin_62328829的博客
12-26 1137
在小程序目录下建立 api 文件夹，并在文件夹下创建 api.js 脚本。下面开始封装 wx.request。post 请求就是api.post()…，get 请求就是api.get()…那么微信小程序会不会有类似vue中axios那样的东西呢。我们每次都需要写这些参数的话就很麻烦。通常项目中会有很多需要请求的接口。推荐两个自己封装的请求。使用封装过后的 api。
微信小程序请求request封装
最新发布
Xiang_Gong_Ya_的博客
06-13 835
【代码】微信小程序请求request封装。
微信小程序网络请求封装示例
10-18
主要介绍了微信小程序网络请求封装示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序request请求封装，验签代码实例
10-15
本文将详细介绍微信小程序中的request请求封装以及验签的代码实现。 首先，我们需要了解微信小程序中的request方法的基本用法。request是微信小程序提供的用于向服务器发送HTTP请求的API，支持GET、POST等多种请求...
微信小程序（封装网络请求）
qq_45532769的博客
01-31 391
微信小程序（封装网络请求）
小程序对网络请求的封装
社会人
10-08 340
1.创建一个小程序应用 2.在跟pages 平级创建一个目录 ，名字自定义，我这里的例子以server为例 3.在目录下创建 config.js home.js server.js三个js文件 目录如下 这里提供一个免费接口 http://web.source.91yunshi.com/class config.js 代码如下 //创建一个常量 并导出 const baseUrl ='h...
小程序封装网络请求
weixin_66591252的博客
11-01 154
【代码】小程序封装网络请求。
小程序 request请求的封装
大志的博客
11-16 192
封装wx.requst 原因 在小程序的开发过程中。发起 HTTPS 网络请求。要用到wx.request方法。在使用过程中发现。每次调用这个方法发现其中绝大部分的内容都是重复的。这样以来一个js中调用多次https请求会导致代码特别混乱。所以要对wx.request()方法进行封装。 封装步骤 在小程序的根目录新建api的文件夹,并且新建req.js 封装代码 const app = getApp(); /** * @param {*} url 请求路径 * @param {*} option
小程序的请求的封装
Salunone的博客
11-22 491
utils/ajax.js中 module.exports = function (api, method, url, params, ) { wx.showLoading({ mask: true, title: '加载中', }); return new Promise((resolve, reject) => { var sessionid = wx...
小程序中的请求封装
weixin_30399821的博客
04-23 117
数据请求 小程序和其他的框架一样，也会涉及的数据请求。最基本的做法，是在生命周期或者其他的事件方法里面使用wx.request就可以了，如下所示： onLoad: function (options) { wx.request({ url: 'http://bl.7yue.pro/v1/classic/latest', header:{ ...
小程序请求封装
阳光暖暖的
12-05 164
代码 // 请求api的基础路径 export const baseUrl = 'http://xxxxxx/com' /** * 统一的请求封装 * @param {String} api 请求的api地址 * @param {JSON} params 请求携带的参数 * @param {String} methods 请求方式，默认GET * @param {boolean} [l...
微信小程序GET请求封装实践
"微信小程序get请求封装-携带参数" 在微信小程序的开发过程中，为了提高代码复用性和简化网络请求操作，通常需要对网络请求进行封装。这篇内容主要讲解如何在微信小程序中封装一个GET请求函数，使其能携带参数。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值