UniApp中使用API接口与后端进行数据交互的实战示例【UniApp】-五八三

UniApp作为一种跨平台开发框架，能够快速构建移动应用，并实现与后端服务器的数据交互。本文将介绍如何在UniApp中使用API接口与后端进行数据交互，并提供一个实战示例。通过示例代码，你将学会发送请求、处理响应、传递参数以及处理异常，从而实现与后端的数据交互。

1. 引言

在现代移动应用开发中，与后端服务器进行数据交互是不可或缺的一部分。通过使用API接口，前端应用能够向后端发送请求并获取数据，实现与后端的数据交互。UniApp提供了一套简洁而强大的API接口，使开发人员能够轻松地实现与后端服务器的数据交互。

2. UniApp中的API接口

UniApp提供了一系列用于发送HTTP请求的API接口，包括uni.request、uni.uploadFile和uni.downloadFile等。这些接口支持发送不同类型的请求，并提供了灵活的参数配置选项。

2.1 `uni.request`接口

uni.request接口用于发送HTTP请求，并可以处理响应数据。它支持发送GET、POST等不同类型的请求，并可以通过设置header参数传递请求头信息。

以下是一个使用uni.request发送GET请求的示例代码：

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(res) {

    console.log('请求成功', res.data);
  },

  fail: function(err) {

    console.log('请求失败', err);
  }

});

2.2 `uni.uploadFile`接口

uni.uploadFile接口用于上传文件到后端服务器。它支持将本地文件上传至指定的URL，并可以通过设置formData参数传递其他表单数据。

以下是一个使用uni.uploadFile上传文件的示例代码：

uni.uploadFile({
  url: 'https://api.example.com/upload',
  filePath: 'path/to/file',
  name: 'file',
  formData: {
    user: 'John Doe'
  },
  success: function(res) {
    console.log('上传成功', res.data);
  },
  fail: function(err) {
    console.log('上传失败', err);
  }
});

2.3 `uni.downloadFile`接口

uni.downloadFile接口用于从后端服务器下载文件。它支持下载指定URL的文件，并可以通过设置filePath参数指定保存路径。

以下是一个使用uni.downloadFile下载文件的示例代码：

uni.downloadFile({
  url: 'https://api.example.com/files/file.pdf',
  filePath: 'path/to/save/file.pdf',
  success: function(res) {

    console.log('下载成功', res.tempFilePath);
  },

  fail: function(err) {

    console.log('下载失败', err);
  }

});

3. 实战示例：获取用户信息

下面以获取用户信息为例，演示如何在UniApp中使用API接口与后端进行数据交互。

3.1 编写后端API接口

首先，在后端服务器上编写一个API接口，用于返回用户信息。这个接口可以接受用户ID作为参数，并返回对应用户的信息。

例如，使用Node.js和Express编写一个简单的API接口：

const express = require('express');
const app = express();

app.get('/api/user/:id', (req, res) => {
  const userId = req.params.id;
  // 从数据库中查询用户信息
  const user = getUserInfo(userId);
  res.json(user);
});

app.listen(3000, () => {
  console.log('服务器已启动');
});

3.2 在UniApp中使用API接口

在UniApp项目中，创建一个页面，用于获取用户信息。在页面中，使用uni.request接口发送GET请求，获取后端返回的用户信息。

<template>

  <view>
    <text>{{ userInfo.name }}</text>
    <text>{{ userInfo.email }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {}
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      uni.request({
        url: 'https://api.example.com/user/1', // 假设用户ID为1
        method: 'GET',
        success: (res) => {
          this.userInfo = res.data;
        },
        fail: (err) => {
          console.log('请求失败', err);
        }
      });
    }
  }
};
</script>

通过以上代码，UniApp会向后端发送GET请求，获取用户ID为1的用户信息，并将信息赋值给userInfo变量。页面渲染时，用户信息会显示在页面上。

组件的类别

uni-app支持的组件分为vue组件和小程序自定义组件。

如果你还不了解这两种组件，可以参阅各自的文档

vue组件
小程序自定义组件：其规范不是vue规范，而是小程序规范

日常开发来讲，推荐使用vue组件。uni-app支持小程序组件主要是为了兼容更多生态资源。

如果扩展组件符合uni-app的easycom组件规范，则可以免注册，直接使用。比如uni-ui扩展组件就符合easycom组件规范。

如果组件不符合easycom规范，则需要在代码里手动import和注册组件，然后才能使用。

除了easycom规范外，扩展组件还有很多概念，比如uni_module、datacom、原生组件、uniCloud组件。

<template>

        <view>
            <uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 -->
        </view>
    </template>
<script>
    // 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
    export default {
        data() {
            return {
                
            }
        }
    }
</script>

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。