在 UniApp 开发中，网络请求是必不可少的一部分，它让我们可以从后端 API 获取数据，并在页面中展示。UniApp 提供了一个跨平台的 uni.request 方法来进行网络请求，支持多端兼容，包括微信小程序、H5、iOS 和 Android 等。在这篇博客中，我们将详细介绍如何使用 uni.request 进行网络请求，并结合 Promise 和 async/await 语法处理异步操作，以及如何处理 API 返回的数据。

1. 使用 uni.request 进行网络请求

uni.request 是 UniApp 提供的跨平台 HTTP 请求方法，类似于浏览器中的 XMLHttpRequest 或 fetch。通过它，我们可以向服务器发送请求，并获取返回的数据。

基本语法

uni.request({
  url: 'https://api.example.com/data', // 接口地址
  method: 'GET', // 请求方法（GET, POST 等）
  data: {}, // 请求参数（可选）
  header: {}, // 自定义请求头（可选）
  success: (res) => {
    console.log(res.data); // 请求成功后的回调
  },
  fail: (err) => {
    console.error(err); // 请求失败后的回调
  }
});

示例：获取用户数据

假设我们需要从 https://jsonplaceholder.typicode.com/users 获取用户信息，可以通过以下方式实现：

<template>
  <view>
    <button @click="getUsers">获取用户列表</button>
    <view v-for="user in users" :key="user.id">
      <text>{{ user.name }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  methods: {
    getUsers() {
      uni.request({
        url: 'https://jsonplaceholder.typicode.com/users',
        method: 'GET',
        success: (res) => {
          this.users = res.data; // 将请求到的数据赋值给 users
        },
        fail: (err) => {
          console.error('请求失败', err);
        }
      });
    }
  }
};
</script>

在这个例子中，我们通过点击按钮来触发 getUsers 方法，使用 uni.request 发送 GET 请求来获取用户数据，并将数据展示在页面上。

2. Promise 和 async/await 语法

在处理网络请求时，回调函数的嵌套可能会让代码变得复杂和难以维护。为了简化异步操作的处理，JavaScript 引入了 Promise 和 async/await 语法，帮助我们以更简洁的方式编写异步代码。

Promise 处理 uni.request

UniApp 中，uni.request 本身并不返回 Promise，因此我们需要手动封装它。

function request(url, method = 'GET', data = {}) {
  return new Promise((resolve, reject) => {
    uni.request({
      url,
      method,
      data,
      success: (res) => resolve(res),
      fail: (err) => reject(err)
    });
  });
}

使用封装的 Promise 进行请求

methods: {
  getUsers() {
    request('https://jsonplaceholder.typicode.com/users')
      .then(res => {
        this.users = res.data;
      })
      .catch(err => {
        console.error('请求失败', err);
      });
  }
}

使用 async/await 处理异步请求

async/await 是基于 Promise 的语法糖，它让异步代码看起来像同步代码，进一步提升代码的可读性。

methods: {
  async getUsers() {
    try {
      const res = await request('https://jsonplaceholder.typicode.com/users');
      this.users = res.data;
    } catch (err) {
      console.error('请求失败', err);
    }
  }
}

在这个示例中，await 等待 request 的结果，只有当请求完成后，程序才会继续执行后续代码。try/catch 用于捕获异常情况，比如网络请求失败。

3. API 接口数据处理

在实际开发中，API 返回的数据可能需要进行处理才能在页面中展示，尤其是当数据结构比较复杂或者需要格式化数据时。

示例：格式化用户信息

假设我们从 API 获取的用户数据包含很多信息，而我们只想展示用户的名字和电子邮件。我们可以在获取数据后对其进行处理。

<template>
  <view>
    <button @click="getUsers">获取用户列表</button>
    <view v-for="user in users" :key="user.id">
      <text>{{ user.name }} - {{ user.email }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  methods: {
    async getUsers() {
      try {
        const res = await request('https://jsonplaceholder.typicode.com/users');
        // 只提取 name 和 email
        this.users = res.data.map(user => ({
          name: user.name,
          email: user.email
        }));
      } catch (err) {
        console.error('请求失败', err);
      }
    }
  }
};
</script>

数据处理后的结果

在这个例子中，map 方法用于遍历 API 返回的数据数组，并提取出我们需要的字段 name 和 email，然后将处理后的数据赋值给 users。这种数据处理方法可以根据业务需求进行自定义。

4. 完整示例：POST 请求与数据提交

除了 GET 请求，我们还可以使用 POST 请求将数据提交到服务器。

示例：提交表单数据

<template>
  <view>
    <input v-model="name" placeholder="输入名字" />
    <input v-model="email" placeholder="输入邮箱" />
    <button @click="submitData">提交数据</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  methods: {
    async submitData() {
      try {
        const res = await request('https://jsonplaceholder.typicode.com/users', 'POST', {
          name: this.name,
          email: this.email
        });
        console.log('提交成功', res.data);
      } catch (err) {
        console.error('提交失败', err);
      }
    }
  }
};
</script>

在这个示例中，我们通过表单输入框收集用户数据，然后使用 POST 请求将数据发送到服务器。通过 request 函数中的 data 参数，我们可以向服务器发送任意数据。

总结

在 UniApp 中，使用 uni.request 进行网络请求非常简单且灵活。通过结合 Promise 和 async/await 语法，我们可以有效地处理异步请求，避免回调地狱。此外，在处理 API 返回数据时，我们可以通过数组操作、数据过滤等方式优化数据展示和处理。掌握这些技术后，你将能更好地管理应用中的网络请求逻辑，提升开发效率。