API 和网络请求

在 UniApp 中，处理网络请求和使用 API 是实现数据交互和动态内容的关键部分。你将学习如何使用 UniApp 的 API 发送请求、处理响应、以及进行数据存储和管理。

5. API 和网络请求

5.1 使用 UniApp 提供的 API

UniApp 提供了一系列内置 API，用于处理设备信息、系统功能、网络请求等。你可以使用这些 API 来访问设备的硬件功能、进行系统操作、获取设备信息等。

常用 API 示例：

1. 获取设备信息

uni.getSystemInfo({
  success: function (res) {
    console.log('Device Model: ' + res.model);
    console.log('Device Pixel Ratio: ' + res.pixelRatio);
  }
});

解释：

• uni.getSystemInfo：获取设备的系统信息，例如型号、屏幕尺寸等。

2. 显示提示框

uni.showToast({
  title: 'This is a toast message',
  icon: 'success',
  duration: 2000
});

解释：

• uni.showToast：显示一个消息提示框，参数包括消息内容、图标类型和持续时间。

3. 获取用户位置

uni.getLocation({
  type: 'wgs84',
  success: function (res) {
    console.log('Latitude: ' + res.latitude);
    console.log('Longitude: ' + res.longitude);
  }
});

解释：

• uni.getLocation：获取用户的地理位置，包括纬度和经度。

5.2 发送网络请求 (uni.request)

uni.request 是 UniApp 提供的一个网络请求 API，用于发起 HTTP 请求（GET、POST 等），获取远程服务器的数据。

1. 发送 GET 请求

例子：

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function (res) {
    console.log('Data:', res.data);
  },
  fail: function (error) {
    console.error('Request Failed:', error);
  }
});

解释：

• url：请求的 URL 地址。
• method：请求方法（如 GET、POST）。
• success：请求成功时的回调函数，res.data 包含服务器返回的数据。
• fail：请求失败时的回调函数。

2. 发送 POST 请求

例子：

uni.request({
  url: 'https://api.example.com/submit',
  method: 'POST',
  data: {
    name: 'John Doe',
    age: 30
  },
  success: function (res) {
    console.log('Response:', res.data);
  },
  fail: function (error) {
    console.error('Request Failed:', error);
  }
});

解释：

• data：POST 请求中要发送的数据。

3. 请求头和请求参数

例子：

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  header: {
    'Authorization': 'Bearer token',
    'Content-Type': 'application/json'
  },
  data: {
    query: 'example'
  },
  success: function (res) {
    console.log('Data:', res.data);
  },
  fail: function (error) {
    console.error('Request Failed:', error);
  }
});

解释：

• header：设置请求头信息，如认证信息和内容类型。
• data：请求的参数数据。

5.3 数据处理和存储

UniApp 提供了 API 用于处理和存储本地数据，常用的包括 uni.setStorage、uni.getStorage、uni.removeStorage 和 uni.clearStorage。

1. 存储数据

例子：

uni.setStorage({
  key: 'userInfo',
  data: {
    name: 'John Doe',
    age: 30
  },
  success: function () {
    console.log('Data Stored Successfully');
  }
});

解释：

• key：存储数据的键。
• data：要存储的数据。

2. 获取数据

例子：

uni.getStorage({
  key: 'userInfo',
  success: function (res) {
    console.log('Stored Data:', res.data);
  },
  fail: function () {
    console.error('Failed to Retrieve Data');
  }
});

解释：

• key：要获取数据的键。
• res.data：获取到的数据。

3. 删除数据

例子：

uni.removeStorage({
  key: 'userInfo',
  success: function () {
    console.log('Data Removed Successfully');
  }
});

解释：

• key：要删除数据的键。

4. 清除所有数据

例子：

uni.clearStorage({
  success: function () {
    console.log('All Data Cleared');
  }
});

解释：

• uni.clearStorage：清除所有存储的数据。

总结

通过上述内容，你可以学会如何在 UniApp 中进行 API 调用和网络请求，以及如何处理和存储本地数据。这些技能对实现数据交互和用户信息管理至关重要。