封装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 都是虚拟

如有错误请告知

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

邮箱 1413229255@qq.com

相关推荐
苹果电脑的鑫鑫2 分钟前
.eslintrc.js这个文件作用
开发语言·javascript·ecmascript
vx_bisheyuange10 分钟前
基于SpringBoot的便利店信息管理系统
前端·javascript·vue.js·毕业设计
晚烛11 分钟前
智启工厂脉搏:基于 OpenHarmony + Flutter 的信创工业边缘智能平台构建实践
前端·javascript·flutter
Zsnoin能13 分钟前
都快2026了,还有人不会国际化和暗黑主题适配吗,一篇文章彻底解决
前端·javascript
两个西柚呀15 分钟前
es6和commonjs模块化规范的深入理解
前端·javascript·es6
www_stdio15 分钟前
爬楼梯?不,你在攀登算法的珠穆朗玛峰!
前端·javascript·面试
爱吃大芒果16 分钟前
Flutter 表单开发实战:表单验证、输入格式化与提交处理
开发语言·javascript·flutter·华为·harmonyos
光影少年16 分钟前
RN vs Flutter vs Expo 选型
前端·flutter·react native
风止何安啊23 分钟前
🚀别再卷 Redux 了!Zustand 才是 React 状态管理的躺平神器
前端·react.js·面试
鹿角片ljp28 分钟前
Spring Boot Web入门:从零开始构建web程序
前端·spring boot·后端