平台兼容性
使用 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 }
调用方式
-
全局使用
在 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) } }
-
局部使用
局部使用,不需要在 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; } }