wx小程序对request请求进行简易的封装

已于 2025-02-26 10:49:19 修改
阅读量1.1k 收藏 29
点赞数 7
文章标签： 小程序 uni-app
于 2025-02-26 10:43:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_61744788/article/details/145855852
版权

     开发过程中，总喜欢对一些公共的方法进行一些特定的封装，以达到自己想要的效果，同时也可以使得代码简介、可维护、可复用，所以在自己实现一个wx小程序的时候特意对请求方式进行了封装，写的不好请别介意😐，喜欢可以点赞收藏

 1、本文采用的还是官方提供的uni.request方式，参考uni-app

参数名类型必填默认值说明平台差异说明
urlString是开发者服务器接口地址
dataObject/String/ArrayBuffer否请求的参数App 3.3.7 以下不支持 ArrayBuffer 类型
headerObject否设置请求的 header，header 中不能设置 RefererApp、H5端会自动带上cookie，且H5端不可手动修改
methodString否GET有效值详见下方说明
timeoutNumber否60000超时时间，单位 msH5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
dataTypeString否json如果设为 json，会对返回的数据进行一次 JSON.parse，非 json 不会进行 JSON.parse
responseTypeString否text设置响应的数据类型。合法值：text、arraybuffer支付宝小程序不支持
sslVerifyBoolean否true验证 ssl 证书仅App安卓端支持（HBuilderX 2.3.3+），不支持离线打包
withCredentialsBoolean否false跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
firstIpv4Boolean否falseDNS解析时优先使用ipv4仅 App-Android 支持 (HBuilderX 2.8.0+)
enableHttp2Boolean否false开启 http2微信小程序
enableQuicBoolean否false开启 quic微信小程序
enableCacheBoolean否false开启 cache微信小程序、抖音小程序 2.31.0+
enableHttpDNSBoolean否false是否开启 HttpDNS 服务。如开启，需要同时填入 httpDNSServiceId 。 HttpDNS 用法详见 移动解析HttpDNS微信小程序
httpDNSServiceIdString否HttpDNS 服务商 Id。 HttpDNS 用法详见 移动解析HttpDNS微信小程序
enableChunkedBoolean否false开启 transfer-encoding chunked微信小程序
forceCellularNetworkBoolean否falsewifi下使用移动网络发送请求微信小程序
enableCookieBoolean否false开启后可在headers中编辑cookie支付宝小程序 10.2.33+
cloudCacheObject/Boolean否false是否开启云加速（详见云加速服务）百度小程序 3.310.11+
deferBoolean否false控制当前请求是否延时至首屏内容渲染后发送百度小程序 3.310.11+
successFunction否收到开发者服务器成功返回的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

2、首先我们可以先声明一个request类，在类的构造函数（constructor）中构建所需要的方法，对一些请求状态拦截，这个时候就可以使用api中addInterceptor进行拦截设置

参数名类型必填默认值说明平台差异说明
invokeFunction否拦截前触发
returnValueFunction否方法调用后触发，处理返回值
successFunction否成功回调拦截
failFunction否失败回调拦截
completeFunction否完成回调拦截

代码部分

1、新建一个request.js文件

const baseURL = "https://example.com"

 uni.addInterceptor('request', {
            invoke(args) {
                // request 触发前拼接 url
                args.url = (args?.baseURL ? args?.baseURL : baseURL) + args.url;
                const token = uni.getStorageSync('user_token');
                if (token) {
                    args.header = {
                        ...args.header,
                        'Content-Type': 'application/json;charset=UTF-8',
                        Authorization: `${token}`,
                    }
                }
            },
            success(args) {
                // 请求成功后，修改code值为1
                // args.data.code = 200
            },
            fail(err) {
                console.log('interceptor-fail', err)
            },
            complete(res) {
            }
})

当对接口响应状态进行拦截的时候，我是放在了complete完成回调方法里面，这个里面可以获取同时获取到成功和失败的情况；所以要实现定义一个状态码提示

export const checkStatus = (status) => {
    let errorMessage = '';
    if (!status) return;
    switch (status) {
        case 401:
            errorMessage = '认证失败!';
            break;
        case 403:
            errorMessage = '请求被拒绝!';
            break;
        case 404:
            errorMessage = '请求不存在!';
            break;
        case 405:
            errorMessage = '请求方法不允许!';
            break;
        case 408:
            errorMessage = '请求超时!';
            break;
        case 500:
            errorMessage = '服务器错误!';
            break;
        case 501:
            errorMessage = '网络未实现!';
            break;
        case 502:
            errorMessage = '服务器无响应!';
            break;
        case 503:
            errorMessage = '服务器错误!';
            break;
        case 504:
            errorMessage = '网络超时!';
            break;
        default:
    }
    return errorMessage;
};

2、然后对接口的状态进行判断提醒

complete(res) {
                if (res.statusCode == 401) {
                    uni.showToast({
                        title: '认证失败',
                        icon: 'none',
                        duration: 2500,
                    })
                    uni.setStorageSync('user_token', null);
                    uni.setStorageSync('user_info', null);
                    
                    setTimeout(() => {
                        uni.reLaunch({
                            url: '/pages/login/login'
                        })
                    }, 500)
                } else if (res.statusCode != 200) {
                    uni.showToast({
                        title: checkStatus(res.statusCode) || res.statusCode || '接口网络异常',
                        icon: 'none',
                        duration: 2500,
                    })
                } else if (res.statusCode == 200) {
                    if (res.data.code != 200) {
                        if (res.data.code == 401) {
                            uni.showToast({
                                title: '认证失败',
                                icon: 'none',
                                duration: 2500,
                            })
                            uni.setStorageSync('user_token', null);
                            uni.setStorageSync('user_info', null);
                          
                            setTimeout(() => {
                                uni.reLaunch({
                                    url: '/pages/login/login'
                                })
                            }, 500)
                        } else if (checkStatus(res.data.code)) {
                            uni.showToast({
                                title: checkStatus(res.data.code) || '',
                                icon: 'none',
                                duration: 2500,
                            })
                        } else {
                            uni.showToast({
                                title: res.data.message || res.data.msg || '',
                                icon: 'none',
                                duration: 2500,
                            })
                        }
                    }
                }
                uni.hideLoading();
            }

到这里简易的拦截就做好了，这个时候就需要添加请求的方法，

request(config) {
        return new Promise((resolve, reject) => {
            uni.request({
                ...config,
                success: (res) => {
                    if (res.data.code == 200) {
                        resolve(res.data);
                    }
                   
                    reject(res.data.code)
                },
                fail(err) {
                    reject(err)
                }
            })
        })
    }

3、在请求的时候我们可能会习惯性的对请求方式进行分类，比如get、post、put、delete等方式，然后在项目的api中进行不同请求类型的调用，所以需要增加一个公共方法，以便能够在引入的时候能够使用不同的请求类型
首先封装一个httpRequest类，在类中对类型进行不同方法的封装，比如get请求方式

import Request from './request.js'

class httpRequest {
    constructor() {}

    get(url, data, config) {
        return this.request('GET', url, {
            data
        }, config);
    }

  
}


export default new httpRequest();

然后对request方法进行导入之前封装的Request请求类

import Request from './request.js'

class httpRequest {
    constructor() {}

    get(url, data, config) {
        return this.request('GET', url, {
            data
        }, config);
    }

    request(method, url, data, config) {
        return new Promise((resolve, reject) => {
            Request.request({ // 使用正确的 request 实例
                method,
                url,
                ...data,
                ...config
            }).then((resp) => {
                try {
                    resolve(resp);
                } catch (err) {
                    reject(err || new Error('request error!'));
                }
            }).catch((e) => {
                reject(e || new Error('request error!'));
            });
        })
    }
}


export default new httpRequest();

这个时候就配好了一个get请求方式，同时可以拿真实的接口进行验证，同时接口的域名需要在微信小程序中进行域名白名单的配置，否则调用的时候会没有权限。


完整代码

request.js文件

import {
    checkStatus
} from './checkStatus.js'

const baseURL = '' //基本URL地址

class Request {
    constructor(options) {
        uni.addInterceptor('request', {
            invoke(args) {
                // request 触发前拼接 url
                args.url = (args?.baseURL ? args?.baseURL : baseURL) + args.url;
                const token = uni.getStorageSync('user_token');
                if (token) {
                    args.header = {
                        ...args.header,
                        'Content-Type': 'application/json;charset=UTF-8',
                        Authorization: `${token}`,
                    }
                }
            },
            success(args) {
                // 请求成功后，修改code值为1
                // args.data.code = 200
            },
            fail(err) {
                console.log('interceptor-fail', err)
            },
            complete(res) {
                if (res.statusCode == 401) {
                    uni.showToast({
                        title: '认证失败',
                        icon: 'none',
                        duration: 2500,
                    })
                    uni.setStorageSync('user_token', null);
                    uni.setStorageSync('user_info', null);
                    setTimeout(() => {
                        uni.reLaunch({
                            url: '/pages/login/login'
                        })
                    }, 500)
                } else if (res.statusCode != 200) {
                    uni.showToast({
                        title: checkStatus(res.statusCode) || res.statusCode || '接口网络异常',
                        icon: 'none',
                        duration: 2500,
                    })
                } else if (res.statusCode == 200) {
                    if (res.data.code != 200) {
                        if (res.data.code == 401) {
                            uni.showToast({
                                title: '认证失败',
                                icon: 'none',
                                duration: 2500,
                            })
                            uni.setStorageSync('user_token', null);
                            uni.setStorageSync('user_info', null);
                            setTimeout(() => {
                                uni.reLaunch({
                                    url: '/pages/login/login'
                                })
                            }, 500)
                        } else if (checkStatus(res.data.code)) {
                            uni.showToast({
                                title: checkStatus(res.data.code) || '',
                                icon: 'none',
                                duration: 2500,
                            })
                        } else {
                            uni.showToast({
                                title: res.data.message || res.data.msg || '',
                                icon: 'none',
                                duration: 2500,
                            })
                        }
                    }
                }
                uni.hideLoading();
            }
        })
    }

    request(config) {
        return new Promise((resolve, reject) => {
            uni.request({
                ...config,
                success: (res) => {
                    if (res.data.code == 200) {
                        resolve(res.data);
                    }
                    if (config.isThrowError) {
                        resolve(res.data);
                    }
                    reject(res.data.code)
                },
                fail(err) {
                    reject(err)
                }
            })
        })
    }

}

export default new Request();

httpRequest.js文件

import Request from './request.js'

class httpRequest {
    constructor() {}

    get(url, data, config) {
        return this.request('GET', url, {
            data
        }, config);
    }

    post(url, data, config) {
        return this.request('POST', url, {
            data
        }, config);
    }

    put(url, data, config) {
        return this.request('PUT', url, {
            data
        }, config);
    }

    delete(url, data, config) {
        return this.request('DELETE', url, {
            data
        }, config);
    }

    request(method, url, data, config) {
        return new Promise((resolve, reject) => {
            Request.request({ // 使用正确的 request 实例
                method,
                url,
                ...data,
                ...config
            }).then((resp) => {
                try {
                    resolve(resp);
                } catch (err) {
                    reject(err || new Error('request error!'));
                }
            }).catch((e) => {
                reject(e || new Error('request error!'));
            });
        })
    }
}


export default new httpRequest();

checkStatus.js文件

export const checkStatus = (status) => {
    let errorMessage = '';
    if (!status) return;
    switch (status) {
        case 401:
            errorMessage = '认证失败!';
            break;
        case 403:
            errorMessage = '请求被拒绝!';
            break;
        case 404:
            errorMessage = '请求不存在!';
            break;
        case 405:
            errorMessage = '请求方法不允许!';
            break;
        case 408:
            errorMessage = '请求超时!';
            break;
        case 500:
            errorMessage = '服务器错误!';
            break;
        case 501:
            errorMessage = '网络未实现!';
            break;
        case 502:
            errorMessage = '服务器无响应!';
            break;
        case 503:
            errorMessage = '服务器错误!';
            break;
        case 504:
            errorMessage = '网络超时!';
            break;
        default:
    }
    return errorMessage;
};



 

new_攀登者
关注
微信小程序 --- wx.request网络请求封装
每天都要努力学习哦~~
02-22 1万+
为了方便统一处理请求参数以及服务器响应结果，为WxRequest添加拦截器功能，拦截器包括请求拦截器和响应拦截器请求拦截器本质上是在请求之前调用的函数，用来对请求参数进行新增和修改响应拦截器本质上是在响应之后调用的函数，用来对响应数据做点什么注意：不管成功响应还是失败响应，都会执行响应拦截器// 请求拦截器// 在发送请求之前做些什么// 响应拦截器// 对响应数据做点什么通过使用方式，我们可以得出结论：可以在WxRequest类内部定义实例属性，属性中需要包含request以及。
微信小程序 wx.request封装
JxufeCarol的博客
06-09 2857
参考链接： （1）详解微信小程序网络请求接口封装 https://blog.youkuaiyun.com/zyplll/article/details/112272324 （2）微信小程序 wx.request 的封装 https://www.wxapp-union.com/portal.php?mod=view&aid=3660 （3）微信小程序wx.request的简单封装，超详细 https://blog.youkuaiyun.com/qq_43677737/article/details/107769366 （4）
微信小程序request请求的封装
鹏多多的博客
01-18 2198
目录1，前言2，实现思路3，实现过程3.1，request的封装3.2，api的封装4，实际使用 1，前言 在开发微信小程序的过程中，避免不了和服务端请求数据，微信小程序给我们提供了wx.request这个API，调用方法如下 wx.request({ url: 'www.baidu.com', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json'
微信小程序接口封装
最新发布
yunyun1110_的博客
04-17 424
title: `请求失败: ${res.data.message || '未知错误'}`, // 显示错误提示。title: `请求失败: ${err.message || '未知错误'}`, // 显示错误提示。// 请求失败，返回错误信息。// 请求失败，返回错误信息。// title: '加载中...', // 显示的加载文字。// mask: true // 遮罩层，防止用户操作。// 封装 POST 请求。// 封装 GET 请求。
微信小程序 wx.request 的封装
weixin_34008933的博客
02-02 527
首发感言 自学转行到前端也已近两年，也算是简书和掘金的忠实粉丝，但是以前一直惜字如金（实在是胆子小，水平又低），现在我决定视金钱如粪土（就只是脸皮厚了，水平就那样）,好了废话不多说，切入主题，最近自己尝试了一下小程序开发，坑么总是有的，但是我觉得还是request这部分实在是不好看，所以你懂得，我用Promise 对请求做了个简单封装。本文章所述方法主要针对第三方登录 废话不多说直接贴代码： 业务...
微信小程序封装wx.request
weixin_67420857的博客
05-19 800
第一步：在 utils 文件夹中，新建一个 api.js 文件。第二步：在 Page 外面（顶部）。
微信小程序 wx.request的简单封装
至_臻的博客
08-07 1221
在小程序中提供了发起https网络请求的方法wx.request（Object） 直接在js文件中使用此方法 但是做项目还是得使用封装 wx.request({ url: 'http://www.ibugthree.com/oldcar/searchCar', method: 'POST', data: { page: 1, mod: '宝马' }, header: { 'pc-tok...
微信小程序wx.request的简单封装
10-15
主要介绍了微信小程序wx.request的简单封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【微信小程序】wx.request简易仿Axios封装
LEE210的博客
08-03 259
wx.request()方法不支持Promise风格的调用方式，且无法使用拦截器、baseUrl等功能，我根据自己的使用习惯，对其进行简单封装。
小程序中quest请求简易封装及用户登录验证
总结而言，在小程序开发过程中，对wx.request进行简单的封装，可以帮助开发者更高效地处理quest请求，尤其是在需要频繁验证用户身份时。通过封装，我们可以轻松地添加token验证和统一请求头，使得整个开发过程更加...
微信小程序 封装简易版php -api调用
09-27
微信小程序与服务器间的通信主要依赖于`wx.request()`函数，这个函数用于发起HTTP请求，与PHP后端进行数据交互。你需要在小程序中定义请求的URL、方法（GET或POST）、数据格式以及请求成功和失败的回调函数。 2. *...
微信小程序请求封装
02-25
封装的一个request的请求，用的时候只需要引入，然后把参数写进去，把地址写进去就好。
微信小程序-简易计算器-程序源码.zip
05-31
3. wx API：微信小程序提供了丰富的API，如`wx.navigateTo`用于页面跳转，`wx.setStorageSync`用于本地存储，以及`wx.request`用于网络请求等。在计算器中，可能用到`wx.setStorageSync`来存储用户的历史计算结果。 ...
TypeScript封装微信小程序请求实战
weixin_44665959的博客
03-10 2315
前言 最近第一次做原生微信小程序，之前都是采用Taro、uni这两个第三方框架，发现微信原生小程序支持了TypeScript，于是尝试了使用ts结合Promise封装了微信简易请求库，不得不说，写ts确实可以减少动态语言（JS）带来的bug，如下： const host = 'xxx'; /** * http请求配置 */ interface RequestConfig { url: String; method?: HttpMethod; data?: any; nee
微信小程序wx.request封装
陈志鹏的博客
01-10 3509
实现对wx.request()的封装，自动像请求头中添加openid和unionid
微信小程序开发，wx.request网络请求封装
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
08-28 1821
【代码】微信小程序开发，wx.request网络请求封装。
微信小程序request封装
糜家智の博客
03-25 3721
微信小程序封装request请求
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值