封装uniapp request promise化

uniapp request 封装

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

一、 封装方法

1. 使用 promis 封装 request

js 复制代码
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

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

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

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

注意

提供的url 都是虚拟

如有错误请告知

如有侵权请带着截图发邮件

邮箱 [email protected]

相关推荐
程序饲养员7 分钟前
ReactRouter7.5: NavLink 和 Link 的区别是什么?
前端·javascript·react.js
小小小小宇1 小时前
CSS 层叠上下文总结
前端
拉不动的猪1 小时前
设计模式之------命令模式
前端·javascript·面试
Json____1 小时前
springboot框架集成websocket依赖实现物联网设备、前端网页实时通信!
前端·spring boot·websocket·实时通信
uhakadotcom1 小时前
Bun vs Node.js:何时选择 Bun?
前端·javascript·面试
前端snow1 小时前
前端工程师看docker是什么?
前端·javascript·docker
_XU1 小时前
使用FFmpeg和MediaMTX实现本地推流
前端·ffmpeg·音视频开发
鱼樱前端2 小时前
技术路线升级:从“纯前端”到“高价值前端”
前端·javascript
堕落年代2 小时前
Uniapp当中的async/await的作用
前端·javascript·uni-app
酱酱们的每日掘金2 小时前
一键连接 6000 + 应用dify MCP 插件指南、谷歌 AI 编程产品一网打尽、MCP玩出花了丨AI Coding 周刊第 4 期
前端·后端·ai编程·mcp