uniapp addinterceptor的使用方法

在uniapp中如何使用addInterceptor方法？我尝试在main.js里添加拦截器，但不知道具体参数配置和回调函数的写法。能否提供一个完整的示例代码，说明如何拦截请求和响应？另外，这个方法支持哪些拦截场景，比如全局路由跳转、网络请求等？

2 回复

在uniapp中，使用uni.addInterceptor可以拦截API调用。例如：

uni.addInterceptor('request', {
  invoke(args) {
    console.log('调用request前', args)
  },
  success(res) {
    console.log('request成功', res)
  }
})

这样就能拦截uni.request，在调用前后执行自定义逻辑。


在 UniApp 中，addInterceptor 用于全局拦截网络请求（如 uni.request）或上传/下载操作（如 uni.uploadFile 和 uni.downloadFile），常用于添加统一请求头、处理认证、日志记录或错误处理。以下是使用方法：

基本语法

// 在 main.js 或 App.vue 的 onLaunch 中调用
uni.addInterceptor(api, options)
  • api：要拦截的 API 名称，例如 'request'、'uploadFile'。
  • options：配置对象，包含拦截器函数。

示例代码

  1. 拦截请求（uni.request）：

    uni.addInterceptor('request', {
  // 请求发出前处理
  invoke(args) {
    console.log('请求参数:', args)
    // 添加统一请求头（例如 token）
    args.header = {
      ...args.header,
      'Authorization': 'Bearer your-token'
    }
  },
  // 请求成功回调
  success(res) {
    console.log('请求成功:', res)
    // 可统一处理响应数据
    if (res.statusCode === 401) {
      uni.navigateTo({ url: '/pages/login/login' })
    }
  },
  // 请求失败回调
  fail(err) {
    console.error('请求失败:', err)
    uni.showToast({ title: '网络错误', icon: 'none' })
  },
  // 请求完成回调（无论成功失败）
  complete(res) {
    console.log('请求完成')
  }
})

  2. 拦截上传文件（uni.uploadFile）：

    uni.addInterceptor('uploadFile', {
  invoke(args) {
    console.log('上传文件:', args)
  },
  success(res) {
    console.log('上传成功:', res)
  }
})

注意事项

  • 调用位置：建议在 App.vue 的 onLaunch 生命周期中设置，确保全局生效。
  • 拦截器顺序：多个拦截器按添加顺序执行。
  • 谨慎修改参数：在 invoke 中修改 args 会影响原始请求。
  • 避免循环调用：拦截器内不要递归调用同一 API，否则可能死循环。

移除拦截器

使用 uni.removeInterceptor(api) 可移除指定 API 的拦截器。

通过 addInterceptor，可以简化全局网络管理，提升代码可维护性。

回到顶部