使用 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;
       }
     }

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问