Uniapp 封装请求拦截，提升开发体验

2023-09-01 16:12:11

前言

Uniapp 是一个备受欢迎的跨平台开发框架，凭借其"一次开发，多端部署"的特性，深受开发者喜爱。然而，原生 Uniapp 的 uni.request() 方法并不支持请求拦截，这给需要对请求进行统一处理的开发者带来了不便。为此，本文将介绍如何封装 Uniapp 的请求拦截，提升开发体验。

封装过程

为了封装请求拦截，我们需要创建一个单独的 JavaScript 模块，并将它集成到 Uniapp 项目中。具体步骤如下：

在项目根目录下新建一个名为 utils 的文件夹。
在 utils 文件夹中创建 request.js 文件。
在 request.js 文件中，编写以下代码：

export default function request(options) {
  // 在这里编写请求拦截逻辑
  // ...

  // 发送请求
  return uni.request(options);
}

在需要使用请求拦截的页面或组件中，导入 request.js 模块并使用它来发送请求。

import request from '@/utils/request'

request({
  url: 'https://example.com/api/v1/users',
  method: 'GET'
}).then(res => {
  // 处理响应结果
})

自定义拦截逻辑

在 request.js 文件中，我们可以自定义请求拦截逻辑。例如，我们可以为所有请求添加一个公共的请求头：

export default function request(options) {
  // 添加公共请求头
  options.header = {
    'Authorization': `Bearer ${uni.getStorageSync('token')}`
  }

  // 发送请求
  return uni.request(options);
}

或者，我们可以根据需要拦截某些请求并进行特殊处理：

export default function request(options) {
  // 拦截需要特殊处理的请求
  if (options.url.includes('/api/v1/sensitive')) {
    // 进行特殊处理
    // ...
  }

  // 发送请求
  return uni.request(options);
}