uniapp网络请求拦截怎么设置方法详细教程

每次写接口都要手动拼 Header，登录过期了还得在每个页面里判断跳转，这种重复劳动最消磨开发热情。其实 UniApp 虽然没有像 Axios 那样原生自带完善的拦截器机制，但通过简单的封装，我们完全可以实现类似的功能，让网络请求变得干净利落。

最值得先检查的地方是你的项目结构。很多新手喜欢直接在 uni.request 里写业务逻辑，导致代码分散。正确的做法是建立一个独立的工具文件，专门负责“发请求前”和“收到响应后”的处理。

1. 搭建基础请求封装

不要到处散养 uni.request。在项目根目录或 utils 文件夹下新建一个 request.js 文件。这里的核心思路是利用 Promise 包裹原生请求，这样我们才能方便地链式调用和统一处理结果。

在 utils 目录下创建独立的 request.js 文件

在这个文件中，我们先定义一个基础函数。注意，这里不是简单地复制粘贴，而是要预留出“拦截”的位置。比如，我们可以设定一个默认的超时时间和基础 URL，避免每次调用都传一遍。

const baseUrl = 'https://api.example.com';

function request(options) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseUrl + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'Content-Type': 'application/json',
        ...options.header // 允许外部覆盖默认头
      },
      success: (res) => {
        resolve(res);
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
}

export default request;

这段代码虽然简单，但它把散落的配置集中了起来。接下来，我们要在这里面加入真正的“拦截”逻辑。

2. 实现请求拦截：自动注入 Token

所谓请求拦截，就是在数据发出去之前做点手脚。最常见的场景就是给每个请求带上用户的 Token。如果我们在每个页面都去 getStorage 取 Token，不仅代码冗余，还容易漏掉。

在发送请求前同步获取并注入 Authorization Header

修改上面的 request 函数，在发起 uni.request 之前，同步获取存储中的 Token 并添加到 header 中。这样，只要调用了这个封装好的方法，Token 就会自动跟上。

import store from '@/store'; // 假设你使用了 Vuex 或 Pinia

function request(options) {
  // 请求拦截：添加 Token
  const token = uni.getStorageSync('token');
  if (token) {
    options.header = {
      ...options.header,
      'Authorization': 'Bearer ' + token
    };
  }

  return new Promise((resolve, reject) => {
    // ... 原有的 uni.request 代码
  });
}

这里有个细节：使用同步的 getStorageSync 而不是异步的 getStorage。因为 uni.request 本身是异步的，如果在 header 赋值时还在等异步回调，会导致请求先发出去而 Header 还没带上，造成鉴权失败。

3. 实现响应拦截：统一处理错误

收到服务器响应后，我们也需要一层过滤。比如，后端返回状态码 401 表示登录过期，这时候不应该让每个页面都去写 if (code === 401) { jumpToLogin() }，而是应该在拦截器里统一处理。

统一捕获 401 状态码并执行跳转登录逻辑

在 success 回调中，我们先检查业务状态码。如果一切正常，直接返回数据部分；如果遇到特定错误码，则执行统一的操作，如弹出提示或跳转登录页。

success: (res) => {
  const { statusCode, data } = res;
  
  // 假设后端规范：code 200 为成功
  if (data.code === 200) {
    resolve(data.data);
  } else if (data.code === 401) {
    // 响应拦截：处理登录过期
    uni.removeStorageSync('token');
    uni.reLaunch({ url: '/pages/login/login' });
    reject(new Error('登录已过期'));
  } else {
    // 其他业务错误，统一抛出或提示
    uni.showToast({ title: data.message || '请求失败', icon: 'none' });
    reject(data);
  }
},
fail: (err) => {
  // 网络层错误，如无网络连接
  uni.showToast({ title: '网络连接异常', icon: 'none' });
  reject(err);
}

这样处理后，业务组件里只需要关心成功的数据，不需要再写一堆 if-else 来判断各种异常情况。

4. 全局挂载与使用

封装好后，为了方便在全局使用，可以在 main.js 中将其挂载到 Vue 原型上，或者在 Composition API 项目中作为模块导入。

业务组件中简洁的 API 调用方式

如果是 Vue 2 写法：

import request from './utils/request';
Vue.prototype.$request = request;

在页面中使用时，代码会变得非常清爽：

this.$request({
  url: '/user/info',
  method: 'POST',
  data: { id: 1 }
}).then(res => {
  console.log('用户信息:', res);
}).catch(err => {
  // 这里只处理未被拦截器完全消化的特殊错误
});

通过这几步，你就拥有了一个具备基本拦截能力的网络请求模块。它不仅能减少重复代码，还能让项目的网络层逻辑更加清晰可控。如果遇到更复杂的场景，比如需要刷新 Token 后重试请求，也可以在这个基础上继续扩展 Promise 的逻辑，而不必改动业务页面的代码。