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

uni-app发起网络请求的三种方式

news 2025/2/24 7:01:42

uni.request(OBJECT)

发起网络请求

具体参数可查看官方文档uni-app

data:请求的参数;

header：设置请求的 header，header 中不能设置 Referer；

method：请求方法；

timeout：超时时间，单位 ms（默认60000）；

dataType：如果设为 json，会对返回的数据进行一次 JSON.parse，非 json 不会进行 JSON.parse；

....

免费测试api接口：https://jsonplaceholder.typicode.com/

第一种

<template></template><script setup>function request(){uni.request({url:"https://jsonplaceholder.typicode.com/posts", //开发者服务器接口地址method:"post",   //请求方法success:res=>{   //收到开发者服务器成功返回的回调函数console.log(res);}})}request();</script><style lang="scss" scoped></style>

第二种

<template></template><script setup>function request(){uni.request({url:"https://jsonplaceholder.typicode.com/posts"}).then(res=>{arrs.value=res.data})}request();</script><style lang="scss" scoped></style>

第三种

异步同步化

<template></template><script setup>async function request(){let res = await uni.request({url:"https://jsonplaceholder.typicode.com/posts"})arrs.value=res.data}request();</script><style lang="scss" scoped></style>

示例：

<template><view class="out" v-for="item in arrs"><view class="title">{{item.title}}</view><view class="content">{{item.body}}</view></view>
</template><script setup>let arrs = ref();function request(){uni.request({url:"https://jsonplaceholder.typicode.com/posts"}).then(res=>{arrs.value=res.data})}request();
</script><style lang="scss" scoped>.out{padding: 30rpx;.title{font-size: 40rpx;}.content{margin: 15rpx 0;border-bottom: 1px solid #696969;color: #696969;}}       
</style>

（注：ref 没有使用 import { ref } from 'vue'; 导入是因为下载了插件（具体可查看博客），没有下载的需常规导入）

运行结果：