【小程序】封装网络请求request模块

news/2024/11/13 22:56:24/

一、封装request请求

因为我把所有项目中的接口也封装到了一个文件中,所以我建了一个services的文件夹,在下面建了一个request.js

在这个里面做了请求拦截器和响应拦截器,

const apiConfig = require('../config/baseUrl.js');class httpClient {prefixUrl = '';constructor(prefixUrl = '') {this.prefixUrl = prefixUrl}interceptors = {// 请求拦截器request: (params) => {if (params.showLoading) {// TODO: 封装loadingtt.showLoading({"title": "加载中...","mask": true,});}// 处理请求数据,如添加Header信息等,const config = {...params,url: apiConfig.BASE_URL + this.prefixUrl + params.url,header: {...params.header,'Content-type': 'application/json',//TODO: 后端需要的字段 // 'Access-Token': tt.getStorageSync('login.user.xxx')},timeout: 60000, // 超时时长,小程序默认是 1 分钟};if (config.method === 'GET') {config.url += '?' + Object.keys(config.data).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(config.data[key])}`).join('&');}return config;},// 响应拦截器response: (response) => {console.log('response', response)if (response.config.showLoading) {tt.hideLoading();}//TODO: 错误信息处理if (response.data.code && response.data.code !== 0 && response.data.code !== 200) {tt.showToast({title: response.data.message,duration: 2000,icon: "none",mask: false});return Promise.reject(response);}return response.data;}}request(config) {config = this.interceptors.request(config)// 网络请求return new Promise((resolve, reject) => {tt.request({...config,success: (res) => {const mergeRes = Object.assign({}, res, {config})resolve(this.interceptors.response(mergeRes))},fail: (err) => {const mergeErr = Object.assign({}, err, {config})reject(this.interceptors.response(mergeErr))},});});}get(url, data = {}, config = {}, loading = true) {return this.request(Object.assign({ url, data, method: 'GET', showLoading: loading }, config))}post(url, data = {}, config = {}, loading = true) {return this.request(Object.assign({ url, data, method: 'POST', showLoading: loading }, config))}put(url, data = {}, config = {}, loading = true) {return this.request(Object.assign({ url, data, method: 'PUT', showLoading: loading }, config))}delete(url, data = {}, config = {}, loading = true) {return this.request(Object.assign({ url, data, method: 'DELETE', showLoading: loading }, config))}}module.exports = httpClient;

2、封装对应的 api 文件

在service的文件夹下面建了一个api.js【因为目前这个小程序页面比较少,暂定把所有接口写在同一个文件夹下】

const httpClient = require('./request.js');class ApiManager extends httpClient {constructor(){super('/api');}login(data) {return this.post('/login', data);}getData(data, config) {return this.get('/train_types', data, config);}
}module.exports = new ApiManager();

3. 管理所有地址

module.exports = {BASE_URL: 'http://192.168.2.68:1911',
}

4. 使用

	const loginResponse = await ApiManager.login({user_name: 'admin',password:'hsradmin2022'})console.log('loginResponse', loginResponse)const response = await ApiManager.getData({}, {header: {'Access-Token': loginResponse.data.access_token,},});this.setData({list: response.data.list})console.log(response.data);

参考链接
https://www.npmjs.com/package/mina-request?activeTab=code

官方文档
https://open.feishu.cn/document/uAjLw4CM/uYjL24iN/block/api/network/request


http://www.ppmy.cn/news/1546774.html

相关文章

Qt 窗口可见性 之 close函数和hide函数

close函数 基本功能 close() 方法的主要功能是关闭窗口,并触发一系列与关闭相关的事件和信号。调用此方法后,窗口将不再可见,但窗口对象本身仍然存在,并且可以被再次显示(通过调用 show() 方法)。 事件处…

石油安全理论知识题库 考试宝在线刷题

一、单选题(每题有4个选项,其中只有1个是正确的,将正确的选项号填入括号内) 1.新修订的《中华人民共和国安全生产法》于( )正式实施。 A、2014年1月1日 B、2014年12月1日 C、2015年1月1日 D、2015年…

微信小程序官方评价组件wxacommentplugin下线后如何巧妙调用

在前一段时间微信小程序官方下线了评价组件后,无法再申请到了, 先来说说小程序什么情况下弹出评价? 1.官方邀请用户评价 用户通过搜索使用过小程序后,官方会邀请用户对小程序的使用体验进行评价。这个是系统随机的,…

AI技术赋能电商行业:创新应用与未来展望

💓 博客主页:倔强的石头的CSDN主页 📝Gitee主页:倔强的石头的gitee主页 ⏩ 文章专栏:《热点时事》 期待您的关注 引言 随着科技的飞速发展,人工智能(AI)技术正逐步渗透到各行各业&a…

每日小练:Day2

1.乒乓球筐 题目链接:乒乓球筐__牛客网 题目描述: 这道题主要考察B盒是不是A盒的子集,我们可以通过哈希表来做 单哈希表 import java.util.Scanner;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public stat…

Oracle 数据库创建导入

注意:本教程中的有些命令您可能并不熟悉,但没关系,只需按照说明一步一步创建示例数据库即可。在之后的教程中,会详细介绍每个命令。 1.创建新用户并授予权限 1.1.打开 首先,启动 SQL plus 程序的命令行:…

Java 实现自定义 LRU 缓存

一、引言 在现代软件系统中,缓存是提高性能的重要手段之一。LRU 缓存作为一种常用的缓存策略,能够根据数据的使用频率自动淘汰最近最少使用的数据,从而保持缓存的高效性。在 Java 中,虽然有一些现成的缓存框架可供使用&#xff0c…

PyQt5 加载UI界面与资源文件

步骤一: 使用 Qt Designer 创建 XXX.ui文件 步骤二: 使用 Qt Designer 创建 资源文件 步骤三: Python文件中创建相关类, 使用 uic.loadUi(mainwidget.ui, self ) 加载UI文件 import sys from PyQt5 import QtCore, QtWidgets, uic from PyQt5.QtCore import Qt f…