微信小程序封装一个request请求

以下是一个支持 Promise 的微信小程序请求封装方案,包含基础请求、拦截器、错误处理和类型提示:

// utils/request.js// 基础配置
const config = {baseURL: 'https://api.example.com',timeout: 10000,headers: {'Content-Type': 'application/json'}
}// 拦截器
const interceptors = {request: [],response: []
}// 添加拦截器
function addInterceptor(type, interceptor) {interceptors[type].push(interceptor)
}// 请求核心方法
function request(options = {}) {return new Promise((resolve, reject) => {// 合并配置const mergedOptions = {url: config.baseURL + (options.url || ''),method: 'GET',header: { ...config.headers, ...options.header },data: options.data || {},timeout: options.timeout || config.timeout,...options}// 请求拦截const applyRequestInterceptors = async () => {for (const interceptor of interceptors.request) {mergedOptions = await interceptor(mergedOptions)}return mergedOptions}// 响应处理const handleResponse = async (res) => {let response = resfor (const interceptor of interceptors.response) {response = await interceptor(response)}if (response.statusCode >= 200 && response.statusCode < 300) {resolve(response.data)} else {reject(response)}}// 执行请求applyRequestInterceptors().then(finalOptions => {wx.request({...finalOptions,success: handleResponse,fail: error => {wx.showToast({title: '网络连接失败',icon: 'none'})reject(error)}})}).catch(reject)})
}// 快捷方法
const http = {get: (url, params, options) => request({ url, method: 'GET', data: params, ...options }),post: (url, data, options) => request({ url, method: 'POST', data, ...options }),put: (url, data, options) => request({ url, method: 'PUT', data, ...options }),delete: (url, data, options) => request({ url, method: 'DELETE', data, ...options }),interceptors: {request: {use: interceptor => addInterceptor('request', interceptor)},response: {use: interceptor => addInterceptor('response', interceptor)}}
}export default http

使用示例:

// 在页面或组件中
import http from '@/utils/request'// 添加请求拦截器(例如添加 token)
http.interceptors.request.use(config => {const token = wx.getStorageSync('token')if (token) {config.header.Authorization = `Bearer ${token}`}return config
})// 添加响应拦截器(例如处理通用错误)
http.interceptors.response.use(response => {if (response.code !== 200) {wx.showToast({ title: response.message, icon: 'none' })return Promise.reject(response)}return response
})// 发起请求
http.get('/user/info', { id: 123 }).then(data => console.log('请求成功:', data)).catch(err => console.error('请求失败:', err))http.post('/order/create', { productId: 456 }).then(console.log).catch(console.error)

主要功能特点:

  1. Promise 支持:使用 Promise 封装原生请求 API
  2. 拦截器机制
    • 请求拦截器(认证、参数处理)
    • 响应拦截器(错误处理、数据格式化)
  3. 快捷方法:内置 GET/POST/PUT/DELETE 快捷方法
  4. 全局配置
    • 基础 URL 配置
    • 默认请求头
    • 超时时间设置
  5. 错误处理
    • 网络错误自动提示
    • 状态码错误处理
    • 业务状态码统一处理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/28652.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在 Aptos 上铸造 NFT

今天文章的第一部分将演示如何在 Aptos 上铸造 NFT&#xff0c;并使用 Moralis 轻松获取所有交易详细信息。在这里&#xff0c;我们将指导您完成使用 Aptos CLI 铸造活动门票 NFT 基本代币的过程。您还将了解如何完成初始设置步骤。此外&#xff0c;您还将了解如何获取 Moralis…

Springboot 梳理

一、Springboot 特性 方便创建可独立运行的spring应用程序直接内嵌Tomcat等服务简化了项目的构建配置为spring及第三方库提供自动配置提供生产级特性无需生成代码或者进行xml配置 二、四大核心 自动配置起步依赖命令行界面Actuator - 生成级的特性 三、自动配置的实现原理 …

C语言学习笔记-初阶(30)深入理解指针2

1. 数组名的理解 在上一个章节我们在使用指针访问数组的内容时&#xff0c;有这样的代码&#xff1a; int arr[10] {1,2,3,4,5,6,7,8,9,10}; int *p &arr[0]; 这里我们使用 &arr[0] 的方式拿到了数组第⼀个元素的地址&#xff0c;但是其实数组名本来就是地址&…

【Kubernetes 指南】基础入门——Kubernetes 基本概念(三)

三、Node 1、Node 简介 - Node 是 Pod 真正运行的主机&#xff0c;可以是物理机&#xff0c;也可以是虚拟机。 - 为了管理 Pod&#xff0c;每个 Node 节点 上至少要运行 container runtime&#xff08; 比如 docker 或者 rkt &#xff09;、kubelet 和 kube-proxy 服务。 2、…

电源测试系统有哪些可以利用AI工具的科技??

AI技术的发展对电源模块测试系统的影响是深远的&#xff0c;不仅协助系统提升了测试效率和精度&#xff0c;还推动了测试方法的创新和智能化。那么在电源测试系统中哪些模块可以利用AI工具实现自动化测试? 1. 自动化测试与效率提升 智能测试流程优化 AI算法可以自动优化测试…

解决Spring Boot中LocalDateTime返回前端数据为数组结构的问题

在Spring Boot开发中&#xff0c;处理日期时间数据是一个常见的需求。Java 8 引入了新的日期时间API&#xff0c;如LocalDateTime&#xff0c;它提供了更强大的日期时间处理功能。然而&#xff0c;在将LocalDateTime对象序列化为JSON时&#xff0c;可能会遇到返回为数组结构的问…

Redis---缓存穿透,雪崩,击穿

文章目录 缓存穿透什么是缓存穿透&#xff1f;缓存穿透情况的处理流程是怎样的&#xff1f;缓存穿透的解决办法缓存无效 key布隆过滤器 缓存雪崩什么是缓存雪崩&#xff1f;缓存雪崩的解决办法 缓存击穿什么是缓存击穿&#xff1f;缓存击穿的解决办法 区别对比 在如今的开发中&…

IntelliJ IDEA 2024.3.4 版本无法正常加载maven项目

报错如下&#xff1a; Possible solutions: - Check that Maven settings.xml does not contain http repositories - Check that Maven pom files do not contain http repository http://192.168.22.76:9003/repository/thirdparty/ - Check that Maven pom files do not co…

Select 下拉菜单选项分组

使用<select>元素创建下拉菜单&#xff0c;并使用 <optgroup> 元素对选项进行分组。<optgroup> 元素允许你将相关的 <option> 元素分组在一起&#xff0c;并为每个分组添加一个标签。 <form action"#" method"post"><la…

靶场(二)---靶场心得小白分享

开始&#xff1a; 看一下本地IP 21有未授权访问的话&#xff0c;就从21先看起 PORT STATE SERVICE VERSION 20/tcp closed ftp-data 21/tcp open ftp vsftpd 2.0.8 or later | ftp-anon: Anonymous FTP login allowed (FTP code 230) |_Cant get dire…

【JavaScript — 前端快速入门】 JavaScript 引入方式

JavaScript 1. JavaScript 介绍 1.1 什么是JavaScript? 最初在网景公司&#xff0c;该语言命名为 LiveScript&#xff0c;当时网景公司认为&#xff0c;Java 作为当时最流行的编程语言&#xff0c;带有 “Java” 的名字有助于这门新生语言的传播&#xff0c;将 LiveScript 命名…

5c/c++内存管理

1. C/C内存分布 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] { 1, 2, 3, 4 };char char2[] "abcd";const char* pChar3 "abcd";int* ptr1 (int*)malloc(sizeof(int) * 4);i…

vulnhub靶场之【digitalworld.local系列】的mercy靶机

前言 靶机&#xff1a;digitalworld.local-mercy&#xff0c;IP地址为192.168.10.11 攻击&#xff1a;kali&#xff0c;IP地址为192.168.10.6 kali采用VMware虚拟机&#xff0c;靶机选择使用VMware打开文件&#xff0c;都选择桥接网络 这里官方给的有两种方式&#xff0c;一…

SqlSugar 语法糖推荐方式

//方式1&#xff1a;var dd _repository._Db.Queryable<ConfigAggregateRoot, UserRoleEntity>((o, p) > o.Id p.Id).Select((o, p) > new{o.Id,o.Remark,p.RoleId,});//方式2&#xff1a;不推荐使用&#xff0c;建议优先使用 Lambda 表达式&#xff0c;因为它更…

unity学习63,第2个小游戏:用fungus做一个简单对话游戏

目录 1 目标用fungus做一个简单的剧情对话游戏 1.1 先创建一个新的3D项目 1.2 fungus是什么 1.2.1 怎么获得 1.2 在AssetStore里搜索fungus (插件类)--千万别买收费的错的&#xff01; 1.3 fungus的官网 1.3.1 官网给的3个下载链接&#xff0c;unity的果然已经失效了 …

【RabbitMQ】Producer之TTL过期时间 - 基于AMQP 0-9-1

这篇文章和大家分享Producer发布消息时如何设置消息过期时间&#xff0c;包括队列级别和消息级别&#xff0c;还有如何设置队列的过期时间。 消息过期时间 给消息设置TTL&#xff0c;在超过TTL值后&#xff0c;消息就会变成dead message&#xff08;死信&#xff09;&#xf…

2025.3.2机器学习笔记:PINN文献阅读

2025.3.2周报 一、文献阅读题目信息摘要Abstract创新点网络架构实验结论不足以及展望 一、文献阅读 题目信息 题目&#xff1a; Physics-Informed Neural Networks of the Saint-Venant Equations for Downscaling a Large-Scale River Model期刊&#xff1a; Water Resource…

【HeadFirst系列之HeadFirst设计模式】第14天之与设计模式相处:真实世界中的设计模式

与设计模式相处&#xff1a;真实世界中的设计模式 设计模式是软件开发中的经典解决方案&#xff0c;它们帮助我们解决常见的设计问题&#xff0c;并提高代码的可维护性和可扩展性。在《Head First设计模式》一书中&#xff0c;作者通过生动的案例和通俗的语言&#xff0c;深入…

基于物联网技术的电动车防盗系统设计(论文+源码)

1总体设计 本课题为基于物联网技术的电动车防盗系统&#xff0c;在此将整个系统架构设计如图2.1所示&#xff0c;其采用STM32F103单片机为控制器&#xff0c;通过NEO-6M实现GPS定位功能&#xff0c;通过红外传感器检测电瓶是否离开位&#xff0c;通过Air202 NBIOT模块将当前的数…

玩转大语言模型——Ubuntu系统环境下使用llama.cpp进行CPU与GPU混合推理deepseek

系列文章目录 玩转大语言模型——使用langchain和Ollama本地部署大语言模型 玩转大语言模型——三分钟教你用langchain提示词工程获得猫娘女友 玩转大语言模型——ollama导入huggingface下载的模型 玩转大语言模型——langchain调用ollama视觉多模态语言模型 玩转大语言模型—…