小程序请求封装

在这里插入图片描述

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 => {// 关闭loadingwx.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 => {// 关闭loadingwx.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)}
})