uniapp 网络请求 get请求

最新推荐文章于 2025-06-22 11:55:04 发布

原创最新推荐文章于 2025-06-22 11:55:04 发布 · 1.1w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#网络 #vue.js #javascript

uni-app 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了如何在uni-app中实现网络GET请求，包括配置URL、处理回调函数、获取及更新数据的过程。特别关注了Vue组件上下文中正确操作数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网络请求

在uni中可以调用uni.request方法进行请求网络请求

需要注意的是：在小程序中网络相关的API在使用需要配置域名白名单。

官方文档

如果发起请求就调用我们这个uni.request(OBJECT)

发送get请求

<template>
    <div>
        <view>
            <button @click="sendReq">发送get请求</button>
        </view>
    </div>
</template>

这里的sendReq就是来配置发送请求的

里面定义一个方法

sendReq(){
    uni.request({     
	})
}

首先可以配置一个url

参数名	类型	必填	默认值	说明	平台差异说明
url	String	是		开发者服务器接口地址

这里就是我们要请求的接口地址

拿我这边随便接的地址

sendReq(){
    uni.request({
    	url:"http://localhost:8080/selectUser?id=0"
	})
}

还有一个最重要的:

参数名	类型	必填	默认值	说明	平台差异说明
success	Function	否		收到开发者服务器成功返回的回调函数

success就是我们请求成功后会触发的回调函数

里面的参数有一个res

sendReq(){
    uni.request({
    	url:"http://localhost:8080/selectUser?id=0",
        success(res){
            console.log(res)//打印一下我们回调函数传过来的值
        }
	})
}

其他可以参考官方文档

data:

要想从回调函数里面拿到传过来的值，那你必须得清楚this:

success()回调函数里的this是undefind

如果在回调函数里把能获取到的res.data的值给外部想进来的this.name是不太现实的(报错name is undefind)

但是在点击事件里,在uni.request外你去尝试一下输出一下:

console.log(this)

我这里出来的结果是VueComponent的实例对象,那我们把这个this赋给一个变量that让它进入回调函数里面把里面获取到的res.data.name(我数据库里面的是name,不清楚可以直接console.log(res)或console.log(res.data)查看里面的值)

要知道VueComponent实例对象就是Vue实例对象的孪生兄弟中的弟弟，VueComponent实例对象对比Vue实例对象就是少一个确定为那个容器服务的el(或者说是$mount)和data只能写成函数式，所以Vue实例对象也是有_data的，里面存的就是组件中的data里的属性。所以我们只要在回调函数里面写成:

that._data.name = res.data.name

这样VueComponent里面的data就是传过来属性的值;

整体回调函数:

sendReq(){
    // console.log(this)//VueComponent实例对象
    let that = this
    uni.request({
        url:"http://localhost:8080/selectUser?id=0",
        success(res){
            console.log(res)
            console.log(res.data.name)
            //console.log(this)//undefined
            //console.log(that)//VueComponent实例对象
            that._data.name = res.data.name
        },
    })
}

这个案例的.vue文件

<template>
    <div>
        <view>
            <h2>名字:{{name}}</h2>
            <button @click="sendReq">发送get请求</button>
        </view>
    </div>
</template>

<script>
    export default{
        name: "req",
        components:{},
        data() {
            return {
                name: 'request拿到的名字'
            }
        },
        methods: {
            sendReq(){
                // console.log(this)//VueComponent实例对象
                let that = this
                uni.request({
                    url:"http://localhost:8080/selectUser?id=1",
                    success(res){
                        console.log(res)
                        console.log(res.data.name)
                        // text = res.data.name
                        //console.log(this)//undefined
                        //console.log(that)//VueComponent实例对象
                        that._data.name = res.data.name
                    },
                })
            }
        },
    }
</script>

<style scoped>

</style>