仿axios,封装微信小程序的请求

ops/2024/11/26 15:04:42/

由于小程序中的请求不是非常好用,没有axios好用,所以按照axios封装了一个简易的请求工具。

axiosWechat.js文件

class AxiosWechat {constructor(config = {}) {// 设置基础配置this.config = {baseUrl: '',       // 基础路径headers: {},       // 请求头...config,         // 合并用户传入的配置};// 初始化请求和响应拦截器数组this.requestInterceptors = [];this.responseInterceptors = [];}// 添加请求拦截器beforeRequest(fulfilled, rejected) {this.requestInterceptors.push({ fulfilled, rejected });}// 添加响应拦截器afterRequest(fulfilled, rejected) {this.responseInterceptors.push({ fulfilled, rejected });}// 通用请求方法request(config) {// 合并默认配置和请求配置config = { ...this.config, ...config };// 合并请求头config.headers = { ...this.config.headers, ...config.headers };let chain = Promise.resolve(config);// 执行请求拦截器this.requestInterceptors.forEach((interceptor) => {chain = chain.then(interceptor.fulfilled, interceptor.rejected);});// 发起请求chain = chain.then((finalConfig) => this._sendRequest(finalConfig));// 执行响应拦截器this.responseInterceptors.forEach((interceptor) => {chain = chain.then(interceptor.fulfilled, interceptor.rejected);});return chain;}// GET 请求方法get(url, params = {}, config = {}) {return this.request({url,method: 'GET',params,         // GET 请求使用 params...config,});}// POST 请求方法post(url, data = {}, config = {}) {return this.request({url,method: 'POST',data,           // POST 请求使用 data...config,});}// PUT 请求方法put(url, data = {}, config = {}) {return this.request({url,method: 'PUT',data,           // PUT 请求使用 data...config,});}// DELETE 请求方法delete(url, params = {}, config = {}) {return this.request({url,method: 'DELETE',params,         // DELETE 请求使用 params...config,});}// 内部请求处理_sendRequest(config) {return new Promise((resolve, reject) => {const { baseUrl, url, method, data, params, headers } = config;let weixin = wx;if (typeof uni !== 'undefined') {weixin = uni;}// 发送请求weixin.request({url: baseUrl + url,method: method || 'GET',data: method === 'GET' || method === 'DELETE' ? params : data, // GET 和 DELETE 使用 params,其他使用 dataheader: headers,success: resolve,fail: reject,});});}
}export default AxiosWechat;

初始化请求工具

index.js

import axiosWechat from './axiosWechat.js'const $http = new axiosWechat({baseUrl: 'https://xxxxxx',headers: { 'Content-Type': 'application/json;charset=UTF-8' },
});// 请求拦截器
$http.beforeRequest((config) => {// 请求之前做需要做的return config;},(error) => {console.error('Request Interceptor Error:', error);return Promise.reject(error);}
);// 响应拦截器
$http.afterRequest((response) => {// 请求回来需要做的return response.data}},(error) => {console.error('Response Interceptor Error:', error);return Promise.reject(error);}
);export default $http

文件中使用

import axios from './index.js'
const base = "/api/ofa-admin"export const login = (data) =>{// console.log(axios.post)return axios.post( `${base}/login`,  data, { headers: { ... } })
}export const reqGetCodeImg = () =>{return axios.get( `${base}/open-api/captcha`)
}


http://www.ppmy.cn/ops/136854.html

相关文章

2022年计算机网络408考研真题解析

第一题: 解析:网络体系结构-数据链路层 在ISO网络参考模型中,运输层,网络层和数据链路层都实现了流量的控制功能,其中运输层实现的是端到端的流量控制,网络层实现的是整个网络的流量控制,数据链…

代码管理之Gitlab

文章目录 Git基础概述场景本地修改未提交,拉取远程代码修改提交本地,远程已有新提交 GitIDEA引入Git拉取仓库代码最后位置 Git基础 概述 workspace 工作区:本地电脑上看到的目录; repository 本地仓库:就是工作区中隐…

[less] Operation on an invalid type

我这个是升级项目的时候遇到的,要从 scss 升级到 less,然后代码中就报了这个错误 我说一下代码的错误过程,但是这里没有复现,因为我原本报错的代码要复杂很多,而且是公司代码,不方便透露,这是我…

泷羽sec-linux

基础之linux 声明! 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团…

【QT项目】基于C++的数据链路层帧封装实验(CRC校验算法实现)

目录 一.项目背景 二.基础知识及思路讲解 CRC校验 实现思路 三.工程创建 创建工程 添加文件 ​编辑 四.功能实现 CRC类 crc_checkcode.h crc_checkcode.cpp 主窗口 mainwindow.h mainwindow.cpp 五.最终效果 六.总结 一.项目背景 二.基础知识及思路讲解 CRC校…

ubuntu 安装 docker 记录

本文假设系统为 Ubuntu,从 16.04 到 24.04,且通过 APT 命令安装。理论上也其他 Debian 系的操作系统。 WSL 也一样。 感觉 Docker 官方在强推 Docker Desktop,搜索 Docker 安装文档,一不小心就被导航到了 Docker Desktop 的安装页…

2024亚太杯国际赛C题宠物预测1234问完整解题思路代码+成品参考文章

中国宠物业发展趋势及预测模型 一、问题背景与研究目标 近年来,中国宠物业经历了快速发展,特别是在城市化进程加快、人口结构变化和消费水平提升的背景下,宠物作为家庭成员的角色变得愈发重要。根据相关数据,中国宠物数量&#…

PPT分享 | IBM集团业务流程架构顶层规划-订单到交付-销售到回款方案

PPT下载链接见文末~ IBM业务流程规划方法是一套结构化、体系化的流程设计理论,其企业流程框架(EPF)是一种用于企业业务流程架构设计梳理的方法论。 一、IBM业务流程规划方法的核心 IBM的BPM(业务流程管理)流程管理体…