简介

在UniApp开发中，经常需要从服务器获取数据。UniApp提供了强大的网络请求接口——uni.request，它可以在小程序、H5、App等多个平台上使用，让开发者能够轻松地进行网络请求。

基本用法

使用uni.request进行网络请求的基本语法如下：

uni.request({
    url: 'https://api.example.com/data', // 请求的URL
    method: 'GET', // 请求方法
    success: function (res) {
        console.log(res.data); // 请求成功后的回调，res.data为服务器返回的数据
    },
    fail: function (err) {
        console.error(err); // 请求失败后的回调
    }
});

案例讲解

下面是一个具体的案例，演示了如何使用uni.request从服务器获取用户信息，并在页面上显示。

1. 创建页面

在UniApp项目中创建一个新的页面，比如pages/userInfo/userInfo.vue。

2. 编写页面代码

在userInfo.vue中编写以下代码：

    
        用户信息
        
            姓名: {{ userInfo.name }}
            年龄: {{ userInfo.age }}
        
        
            加载中...
        
    



export default {
    data() {
        return {
            userInfo: null
        };
    },
    onLoad() {
        this.getUserInfo();
    },
    methods: {
        getUserInfo() {
            uni.request({
                url: 'https://api.example.com/user', // 替换为实际的API地址
                method: 'GET',
                success: (res) => {
                    this.userInfo = res.data;
                },
                fail: (err) => {
                    console.error('请求失败:', err);
                }
            });
        }
    }
};



/* 添加一些简单的样式 */
view {
    padding: 20px;
}
text {
    display: block;
    margin-bottom: 10px;
}

3. 运行项目

在HBuilderX或其他支持UniApp的开发工具中运行项目，打开userInfo页面，你应该能够看到从服务器获取并显示的用户信息。

注意事项

• 确保请求的URL是有效的，并且服务器能够正常返回数据。
• 在跨域请求时，需要确保服务器支持CORS（跨源资源共享）。
• 在实际开发中，注意处理网络请求的异常情况，比如请求超时、网络中断等。