一、uni-app简介

二、数据请求基础

三、uni-api发送数据请求

uni.request API介绍

使用uni.request发送GET请求的示例

使用uni.request发送POST请求的示例

一、uni-app简介

uni-app是什么？

uni-app是一个使用Vue.js开发所有前端应用的框架，它允许开发者编写一次代码，发布到多个平台。这些平台包括iOS、Android、以及各种小程序（如微信/支付宝/百度/字节跳动/QQ/淘宝/京东等）和H5等。uni-app通过封装Vue.js的核心以及微信小程序等平台的原生能力，让开发者可以使用Vue的语法来编写应用，并发布到多个平台。

uni-app的特点：

跨平台能力：uni-app的最大特点在于其强大的跨平台能力。无论是移动端应用还是小程序，只需要编写一次代码，就可以轻松发布到多个平台，极大地提高了开发效率。
组件丰富：uni-app提供了丰富的组件库，包括视图容器、基础内容、表单组件、导航组件、媒体组件、地图组件、画布组件等，满足各种开发需求。
性能优秀：uni-app通过原生渲染和跨平台性能优化，保证了应用程序的性能表现。无论是在iOS、Android还是Web端，都能获得接近原生应用的性能体验。

uni-app的优势：

开发效率高：uni-app的跨平台特性使得开发者可以一次性编写代码，然后部署到多个平台，避免了针对不同平台开发多套代码的繁琐过程，从而大大提高了开发效率。
降低开发成本：由于只需要维护一套代码，uni-app降低了开发和维护的成本。同时，它丰富的组件库和插件生态也使得开发者可以方便地集成第三方功能和服务，进一步降低了开发成本。
用户体验一致：uni-app支持多端共享组件和API，使得开发者可以在不同平台上实现统一的UI设计和交互体验，为用户提供一致的使用体验。

为何选择uni-app进行开发？

选择uni-app进行开发的原因主要有以下几点：

跨平台支持：uni-app的跨平台能力使得开发者可以轻松地将应用发布到多个平台，满足不同用户群体的需求。
开发效率高：通过一次性编写代码，然后发布到多个平台，uni-app大大提高了开发效率，缩短了开发周期。
性能优化：uni-app通过原生渲染和跨平台性能优化，保证了应用程序的性能表现，为用户提供了流畅的使用体验。
生态完善：uni-app拥有完善的生态体系，包括丰富的组件库、插件生态和开发者社区等，为开发者提供了强大的支持。

综上所述，uni-app凭借其强大的跨平台能力、高效的开发效率、优秀的性能和完善的生态体系，成为了越来越多开发者的首选框架。

二、数据请求基础

在开发uni-app应用时，数据请求是不可避免的一部分。理解HTTP请求的基本概念以及JSON数据格式对于有效地进行数据请求至关重要。

HTTP请求的基本概念

HTTP（Hypertext Transfer Protocol，超文本传输协议）是一种应用层协议，用于在网络中传输超文本数据。在Web开发中，HTTP请求通常用于从服务器获取数据或向服务器发送数据。HTTP请求主要分为两种类型：GET请求和POST请求。

GET请求：GET请求用于从服务器获取数据。当我们在浏览器中输入URL并按下回车键时，浏览器就会向服务器发送一个GET请求，服务器会返回相应的数据给浏览器。GET请求将数据附加在URL后面，并以查询字符串的形式传递。由于GET请求的数据是暴露在URL中的，所以它不适合传输敏感信息。
POST请求：POST请求用于向服务器发送数据。与GET请求不同，POST请求将数据包含在请求体中发送，而不是附加在URL后面。这使得POST请求可以发送大量的数据，并且数据不会暴露在URL中，从而增加了安全性。POST请求常用于提交表单数据、上传文件等场景。

JSON数据格式

JSON（JavaScript Object Notation，JavaScript对象表示法）是一种轻量级的数据交换格式。它基于ECMAScript（欧洲计算机协会制定的js规范）的一个子集，采用完全独立于语言的文本格式来存储和表示数据。JSON数据格式易于阅读和编写，同时也易于机器解析和生成。

在数据请求中，JSON数据格式通常用于表示服务器返回的数据。服务器会将数据以JSON格式进行编码，然后发送给客户端。客户端在接收到数据后，可以使用JavaScript内置的JSON对象来解析JSON数据，从而获取其中的数据内容。JSON数据格式具有简洁明了、易于解析和生成等优点，因此在Web开发中被广泛使用。

在uni-app开发中，我们通常使用uni.request API来发送HTTP请求，并通过设置请求的dataType和responseType等参数来指定数据的格式。在接收到服务器返回的数据后，我们可以使用JSON.parse()方法将JSON字符串转换为JavaScript对象，从而方便地进行数据处理和操作。

三、uni-api发送数据请求

uni.request API介绍

uni.request 是uni-app提供的网络请求API，用于发起网络请求。它支持Promise API，可以方便地处理异步操作。以下是 uni.request 的一些关键参数：

url：请求的URL地址。
method：请求方法，如 GET、POST、PUT 等。
data：请求的数据，对于GET请求，数据会附加在URL后作为查询字符串；对于POST请求，数据会放在请求体中。
header：请求头信息，如设置Content-Type为application/json。
dataType：期望服务器返回的数据类型，如 json、text、xml 等。
responseType：响应数据类型，目前仅支持 json 和 arraybuffer。
success：请求成功的回调函数，接收一个参数 res，包含服务器返回的数据。
fail：请求失败的回调函数。
complete：请求完成时的回调函数，无论成功还是失败都会调用。

使用uni.request发送GET请求的示例


uni.request({  
    url: 'https://example.com/api/data', // 请求的URL  
    method: 'GET', // 请求方法GET  
    success: (res) => {  
        // 请求成功处理逻辑  
        console.log(res.data); // 输出服务器返回的数据  
    },  
    fail: (err) => {  
        // 请求失败处理逻辑  
        console.error('请求失败：', err);  
    }  
});

使用uni.request发送POST请求的示例


uni.request({  
    url: 'https://example.com/api/submit', // 请求的URL  
    method: 'POST', // 请求方法POST  
    data: {  
        key1: 'value1', // 请求的数据  
        key2: 'value2'  
    },  
    header: {  
        'content-type': 'application/json' // 设置请求头  
    },  
    success: (res) => {  
        // 请求成功处理逻辑  
        console.log(res.data); // 输出服务器返回的数据  
    },  
    fail: (err) => {  
        // 请求失败处理逻辑  
        console.error('请求失败：', err);  
    }  
});

四、处理响应数据

发送数据请求后可以对返回的内容进行判断，然后获取成功就对数据进行相应的赋值
如果获取失败可以给相应的提示

五、优化与扩展

加上异步请求async，就可以在request外面也能访问到res这个返回的结果

六、常见问题与解决方案

如果用uni-app做的是微信小程序发送请求时遇到如下报错：

报错原因是在你尝试在一个微信小程序（mp）中发送网络请求时出现的，它表明你尝试访问的域名不在你的小程序配置的合法域名列表中。

在微信小程序中，出于安全考虑，开发者需要预先在微信公众平台为小程序配置可请求的域名列表。只有在这个列表中的域名才能被小程序访问。如果尝试访问不在这个列表中的域名，小程序将会阻止请求并给出类似的错误提示。

我们可以打开微信开发者工作右上角的详情按钮，点击“不校验合法域名”这个选项即可

七、总结

在uni-app的开发过程中，数据请求的重要性不言而喻。它不仅是实现应用功能的基石，也是连接前端界面与后端服务的桥梁。无论是用户信息的获取、商品数据的展示，还是用户行为的跟踪和分析，都离不开数据请求的支持。

JSON Editors