uniapp对uni.request()的封装以及使用

官方文档

uni.request(OBJECT) | uni-app官网 (dcloud.net.cn)

uni.request参数

参数名 说明
url 是写api地址的
data 是用来传值的 对于 GET 方法,会将数据 转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。 对于 POST 方法且 header['content-type']application/json 的数据,会进行 JSON 序列化。 对于 POST 方法且 header['content-type']application/x-www-form-urlencoded 的数据,会将数据转换为 query string。
header 是写请求头信息的
method 必须大写,有效值在不同平台差异说明不同。 GET POST PUT 不支持支付宝小程序 DELETE 不支持支付宝小程序、头条小程序
succes 访问接口成功之后就会调用success参数为res data Object/String/ArrayBuffer 开发者服务器返回的数据 statusCode Number 开发者服务器返回的 HTTP 状态码 header Object 开发者服务器返回的 HTTP Response Header

封装

javascript 复制代码
export const request = (url, params, method = "GET") => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: "https://demo.com/api/public/v1" + url,
			method: method,
			data: params, //传入组装的参数
			header: {
				'Content-Type': 'application/json'
			},
			success: function(result) {
				if (result.statusCode !== 200) {
					console.log("发送请求成功但是开发者服务器返回的 HTTP 状态码不是200", url, params, method, result);
					const data = {
						code: "502",
						msg: "发送请求成功但是开发者服务器返回的 HTTP 状态码不是200",
						data: result
					}
					resolve(data);
				} else {
					console.log("发送请求成功", url, params, method, result);
					// 返回数据
					resolve(result.data);
				}
			},
			fail: function(error) {
				// 返回数据
				console.log("发送请求失败", url, params, method, error);
				const data = {
					code: "500",
					msg: "发送请求失败",
					data: {}
				}
				resolve(data)
			}
		})

	})
}

使用

定义

javascript 复制代码
import {
	request
} from "./request.js"

export const indexDAO = {
	getBanner() {
		return request("/home/swiperdata2",{},"GGT")
	}

}

引入

java 复制代码
<template>
	<view class="page_content">

    </view>
</template>

<script>
	import {
		indexDAO
	} from "netword/index.js"


	export default {
		components: {},
		data() {
			return {
				banner: []
			}
		},
		onLoad() {
			this.loadBanner()
		}
		methods: {
			async loadBanner() {
				const banner = await indexDAO.getBanner()
				if (banner.code == 200) {
					this.banner = banner.data
				}

			}
		}
	}
</script>


<style lang="scss" scoped>

</style>
相关推荐
2501_916008895 小时前
ChatGPT前端开发学习指南:Visual Studio Code与谷歌浏览器安装配置详解
ide·vscode·ios·小程序·uni-app·编辑器·iphone
qq_411262428 小时前
四博AI双目智能音箱方案:四路触控、震动马达、0.71/1.28双目光屏、三轴姿态感应,一键语音克隆和专属知识库
人工智能·apache·智能音箱
2501_915909068 小时前
完整指南:如何将iOS应用上架到App Store
android·ios·小程序·https·uni-app·iphone·webview
杰建云1671 天前
多门店商城小程序怎么做
大数据·apache
xiangxiongfly9151 天前
uni-app 组件总结
前端·javascript·uni-app
2501_915918411 天前
iOS性能数据监控:从概念到工具实践,让应用运行更流畅
android·macos·ios·小程序·uni-app·cocoa·iphone
く成哦2 天前
部署Apache Gravitino项目及使用教程
jupyter·docker-compose·apache·trino·playground·gravitino
2501_915909062 天前
全面解析前端开发中常用的浏览器调试工具及其使用场景
android·ios·小程序·https·uni-app·iphone·webview
wuxianda10302 天前
uniapp项目上架苹果商店4.3a被拒,3天极速解决方案2026.5.8
前端·人工智能·flutter·uni-app·ios上架·苹果上架·苹果4.3a
杰建云1672 天前
商家小程序有什么用
大数据·apache