封装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

相关推荐
风度前端1 小时前
用了都说好的 uniapp 路由框架
前端
冴羽1 小时前
2026 年 Web 前端开发的 8 个趋势!
前端·javascript·vue.js
码银1 小时前
ruoyi的前端(vue)新增的时候给字典设置默认值 但不能正常
前端
fengbizhe2 小时前
bootstrapTable转DataTables,并给有着tfoot的DataTables加滚动条
javascript·bootstrap
刘一说2 小时前
TypeScript 与 JavaScript:现代前端开发的双子星
javascript·ubuntu·typescript
凌览2 小时前
别再死磕 Nginx!http-proxy-middleware 低配置起飞
前端·后端
EndingCoder3 小时前
类的继承和多态
linux·运维·前端·javascript·ubuntu·typescript
用户47949283569153 小时前
React 终于出手了:彻底终结 useEffect 的"闭包陷阱"
前端·javascript·react.js
程序员猫哥3 小时前
前端开发,一句话生成网站
前端
Younglina3 小时前
一个纯前端的网站集合管理工具
前端·vue.js·chrome