返回

UniApp 全局请求封装攻略：打造易用且可靠的网络请求方案

前端

UniApp网络请求进阶：掌控全局请求，提升开发效率

导语

UniApp以其跨平台开发能力著称，其强大的网络请求功能更让开发者如虎添翼。随着项目复杂度提升，网络请求数量激增，如何高效管理这些请求便成为亟需解决的问题。本文将深入探讨UniApp的全局请求封装、拦截器和错误回调函数，帮助你掌握网络请求的精髓，打造易用、可靠的请求解决方案。

全局请求封装：统一管理，高效开发

什么是全局请求封装？

全局请求封装是一种将网络请求相关的代码集中在一个地方的策略。它将所有请求代码统一封装，便于管理和维护。

优势：

  • 统一管理： 集中管理所有网络请求，一目了然。
  • 简化请求代码： 引入封装的请求方法，无需重复编写网络请求代码。
  • 提高代码复用性： 封装后的请求方法可被多个页面或组件复用。
  • 方便调试和维护： 修改封装的请求方法即可，无需逐个页面或组件修改。

代码示例：

在项目中新建一个名为 request.js 的文件，添加以下代码：

// 引入 uni.request API
const uniRequest = uni.request;

// 全局请求封装函数
const request = (options) => {
  // 设置默认的请求头
  options.header = {
    'Content-Type': 'application/json',
  };

  // 发起网络请求
  return uniRequest(options);
};

// 导出 request 函数
export default request;

应用示例：

在需要发起网络请求的页面或组件中，引入 request.js 文件，并使用 request 函数发起网络请求。

// 引入全局请求封装
import request from '../request'

// 使用 request 函数发起网络请求
request({
  url: 'https://example.com/api/get',
  success: (res) => {
    console.log(res.data)
  }
})

拦截器：在请求的各个环节发挥作用

什么是拦截器？

拦截器是一种可以在请求的各个环节（请求发送前、请求完成后）发挥作用的机制。你可以使用拦截器来添加或修改请求头、拦截和处理请求结果、全局处理错误。

优势：

  • 添加或修改请求头： 在发送请求之前，拦截器可以动态修改请求头。
  • 拦截并处理请求结果： 拦截请求完成后，拦截器可以拦截并处理请求结果，例如，解析 JSON 数据。
  • 全局错误处理： 拦截器可以统一处理请求过程中的错误，提供全局的错误处理机制。

代码示例：

在 request.js 文件中，添加以下代码：

// 全局请求拦截器
uni.addInterceptor('request', (config) => {
  // 添加请求头
  config.header['X-Custom-Header'] = 'custom-value';

  // 返回 config
  return config;
});

// 全局响应拦截器
uni.addInterceptor('response', (response) => {
  // 解析 JSON 数据
  if (response.data.code === 200) {
    response.data = JSON.parse(response.data.data);
  }

  // 返回 response
  return response;
});

错误回调：及时发现和处理错误

什么是错误回调函数？

错误回调函数是当请求发生错误时被调用的函数。你可以使用错误回调函数来获取错误信息、显示错误提示、重试请求。

优势：

  • 获取错误信息： 错误回调函数可以获取错误信息，以便进行错误分析和处理。
  • 显示错误提示： 错误回调函数可以在页面上显示错误提示，通知用户请求失败的原因。
  • 重试请求： 错误回调函数可以重试请求，以提高请求的成功率。

代码示例：

在 request.js 文件中，添加以下代码：

// 全局请求失败回调函数
uni.addInterceptor('fail', (error) => {
  // 获取错误信息
  const message = error.message;

  // 显示错误提示
  uni.showToast({
    title: '请求失败：' + message,
    icon: 'error',
  });

  // 重试请求
  setTimeout(() => {
    request(options);
  }, 1000);
});

结语：掌握全局请求封装，让网络请求更轻松

通过上述步骤，你已经成功掌握了UniApp全局请求封装、拦截器和错误回调函数的使用方法。这些技术将帮助你打造一个易用、可靠的网络请求解决方案，有效提升开发效率。

常见问题解答

  1. 为什么使用全局请求封装？

全局请求封装可以统一管理网络请求，简化请求代码，提高代码复用性，方便调试和维护。

  1. 如何使用拦截器添加请求头？

在全局请求拦截器中添加以下代码：

config.header['X-Custom-Header'] = 'custom-value';
  1. 如何使用错误回调函数显示错误提示？

在全局请求失败回调函数中添加以下代码：

uni.showToast({
  title: '请求失败：' + message,
  icon: 'error',
});
  1. 如何使用拦截器解析 JSON 数据？

在全局响应拦截器中添加以下代码：

if (response.data.code === 200) {
  response.data = JSON.parse(response.data.data);
}
  1. 如何使用错误回调函数重试请求？

在全局请求失败回调函数中添加以下代码：

setTimeout(() => {
  request(options);
}, 1000);