使用 uni-app 简单封装一个 request 请求拦截，主要有以下特点：

• 调用简单，基于 Promise 对象实现更简单的 request 使用方式。
• 将所有接口统一起来便于维护。
• 接口独立，如果项目项目很大，可以单独使用。
• 拦截接口错误，可以自定义自己处理，还是全局统一处理。
• 自定义请求配置项，可全局配置统一使用，也可局部配置，单独使用。
• async/await 方式调用接口,随时随地处理数据。

文件结构

request 请求拦截主要是有三个文件构成

• config.js 全局请求配置项，配置请求公共参数。
• interface.js 主逻辑处理文件，再此文件配置全局错误处理。
• index.js 入口文件，统一处理不同接口的调用方式。

使用方式

将附件下载到本地，拖入项目。

场景: 我们现在要调用一个 banner 的接口。

• 服务器地址：https://test.interface.net.cn/api
• 接口地址：banner/test

• 参数: { id : 1 }

  1. 配置config.js

  //  http 请求配置项
  export default {
      //  开发者服务器接口地址
      url: "https://test.interface.net.cn/api",
      //  请求的参数   
      data: {},
      //  设置请求的 header，header 中不能设置 Referer。
      header: {},
      //  （需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT  
      method: "POST",
      //  json    如果设为json，会尝试对返回的数据做一次 JSON.parse    
      dataType: "json",
      //  text    设置响应的数据类型。合法值：text、arraybuffer  1.7.0
      responseType: "text",
      //  收到开发者服务成功返回的回调函数    
      success() {},
      //  接口调用失败的回调函数 
      fail() {},
      //  接口调用结束的回调函数（调用成功、失败都会执行）
      complete() {},
  }

  2. 配置index.js

  这里维护所有的接口地址

  import https from './interface'
  
  /**
   * 将所有接口统一起来便于维护
   * 如果项目很大可以将 url 独立成文件，接口分成不同的模块
   * handle [boolean] 如果需要自己处理 catch 请求 ，传入 true ，交给接口统一处理 ，请传如 false或不传
   */
  // 单独导出
  // 测试接口
  export const test = (data) => {
      return https({
          url: 'test/test',
          data,
      })
  }
  // 轮播图
  export const banner = (data) => {
      return https({
          url: '/banner/36kr',
          method: 'GET', // 默认POST
          data,
          // true 为自己处理请求错误（401、404、405），不交给全局处理
          handle:true
      })
  }
  
  // 默认全部导出
  export default {
      test,
      banner
  }
  

调用方式

1. 全局使用
   在 main.js 引入。

   // main.js
   // 引入文件
   import Http from './common/http'
   // 绑定到 Vue 的实例上
   Vue.prototype.$http = Http
   

   使用

   // pages/index/index.vue
   onLoad() {
       // 如果 index.js handle 不配置, .catch() 不生效。
       this.$http.banner({id:1}).then((res)=>{
           console.log(res)
       }).catch((res)=>{
           console.log(res)
       })
       this.getRequest()
   },
   methods: {
       async getRequest(){
           const banner = await this.$http.banner({id:1})
           console.log(banner)
       }
   }
   

2. 局部使用
   局部使用，不需要在 main.js 中注册

   // pages/index/index.vue
   import {banner} from '@/common/http'
   ...
   onLoad() {
       banner({id:1}).then((res)=>{
           console.log(res)
       })
       this.getRequest()
   },
   methods: {
       async getRequest(){
           const banners = await banner({id:1})
           console.log(banners)
       }
   }
   ...
   

   全局请求拦截处理

   在 interface.js 中，找到 _page_error() 函数 ，处理不同错误码下的业务逻辑。这里只是简单封装，如果有复杂逻辑，可以写成单独模块引入。

    // request 錯誤
    function _page_error(err) {
      switch (err) {
           case 401:
             // 错误码404的处理方式
             console.error("请求被拒绝")
             break;
        case 404:
          // 错误码404的处理方式
          console.error("没有找到页面")
          break;
        case 405:
          console.error("错误的请求")
          break;
      }
    }