当前位置: 首页 > news >正文

封装uniapp request promise化

uniapp request 封装

  • 一、 封装方法
    • 1. 使用 promis 封装 request
    • 2. 封装 api 在 api.js
    • 3.在要请求的页面 调用 api

一、 封装方法

1. 使用 promis 封装 request

const BASE_URL = '你的url接口' //比如  http://198.12.3.3/pz

export function request(config = {}){
	let {
			url,
			data = {},
			method = 'GET',
			header = {},
		} = config
		url = BASE_URL+url
		header['access-key'] = "您的key值"
		header['token'] = '您的toekn值'
		retrun new Promise((resolve, reject) => {
			uni.request({
				url,
				data,
				method,
				header,
				success:(res) =>{
					if(res.data.errCode === 0){
						resolve(res.data)
					}else if(res.data.errCode === 400){
						uni.showModal({
							title:'错误提示',
							content: res.data.errMsg,
							showCancel:false
						})
						resolve(res.data)
					}else{
						uni.showToast({
							title:res.data.errMSg,
							icon:'none'
						})
				},
				fail: (err) =>{
					reject(err)
				}
				
			})
		)
}

2. 封装 api 在 api.js

	import {request} from '@/util/request'
	export function apiGetOrder(data = {}){
		return request({
			url:'您要拼接的url' //比如/order/list
		})
	}

3.在要请求的页面 调用 api

		import {apiGetOrder} from '@/api/api.js'
		const getOrder = async () =>{
		let res = await apiGetOrder()
		orderList.value = res.data
		console.log(res.data);
	}

注意
提供的url 都是虚拟
如有错误请告知
如有侵权请带着截图发邮件
邮箱 1413229255@qq.com

http://www.dtcms.com/a/122639.html

相关文章:

  • 音视频生命探测仪,救援现场的“视听先锋”|鼎跃安全
  • 我们如何控制调度 C、C++ 中的线程执行?
  • HTTP 压力测试工具autocannon(AI)
  • 琴键上的强化学习:让机器人在真实世界里弹钢琴!
  • Spring如何实现资源文件的加载
  • 网络安全之-信息收集
  • 国内协作机器手焊接领域领军人物分析
  • MCP 实战系列(Day 2)- 动手搓个文件系统 MCP 服务器
  • Linux系统管理与编程12: FTP服务配置
  • 《DataX 安装与简单使用指南》
  • 计算机视觉中的基于网格的卷绕算法全解析
  • Ansible(6)——管理变量
  • TDengine 数据模型设计:多列模式与单列模式对比(一)
  • UE5 matcap学习笔记
  • 单片机领域中哈希表
  • 基于 SpringBoot音乐网站与分享平台
  • 设计模式-命令模式详解
  • 大数据学习(104)-clickhouse与hdfs
  • Python web程序在服务器上面部署详细步骤
  • Java延迟队列
  • 铼赛智能Edge mini斩获2025法国设计大奖 | 重新定义数字化齿科美学
  • 深入解析 C++ 设计模式:原理、实现与应用
  • YOLOv12即插即用--CPAM
  • 【Kafka基础】消费者命令行完全指南:从基础到高级消费
  • 软考高级-系统架构设计师 案例题-软件架构设计
  • vue:前端预览 / chrome浏览器设置 / <iframe> 方法预览 doc、pdf / vue-pdf 预览pdf
  • 蓝桥杯 一年中的第几天(日期问题)
  • 如何运用浏览器进行各种调试?(网络、内存、控制台等调试用法)
  • 前端实战:基于Vue3与免费满血版DeepSeek实现无限滚动+懒加载+瀑布流模块及优化策略
  • Vert.x vs. Micronaut:2025年高并发Java框架选型指南