UniApp

2023-05-15 11:01| 来源: 网络整理| 查看: 265

引言

最近在学习uni，尝试着把之前写的一个小网站（网站地址，博客地址）转换成安卓app。由于我只会web和vue，对uni几乎是零基础，所以在转换的过程中遇见了许多问题。

比如，在原网站里面我的ajax请求是基于axios的，也就是基于XMLHttpRequest的，当我把原网站中ajax模块的代码复制到uni-app中时，发现项目是跑不通的。报了一堆错，我也看不懂，但我猜，uni-app可能不支持XMLHttpRequest，导致axios不能用。

于是，我想着用uni-app提供的uni.request()来做ajax请求，但此方法仅仅具有简单的发送请求和接受响应功能，并不具备axios的拦截器、ts支持等功能。所以，我决定按照axios的使用习惯，对uni.request()进行封装，以实现拦截器和typescript支持。

实现代码

实现代码如下： UniRequest类就是我们封装的工具类，实现逻辑很简单，直接看代码和注释就可以看懂，所以不再过多描述。

interface UniRespone extends UniApp.RequestSuccessCallbackResult{ data:T } interface UniRequestConfig{ baseUrl?:string header?:Record timeout?:number // 超时限制，毫秒 } type UniRequestInterceptor = (options: UniApp.RequestOptions) => UniApp.RequestOptions type UniResponseInterceptor = (response: UniApp.RequestSuccessCallbackResult) => UniApp.RequestSuccessCallbackResult type UniResponseErrorInterceptor = (err: UniApp.GeneralCallbackResult) => UniApp.GeneralCallbackResult class UniRequest{ constructor(deaultConfig?:UniRequestConfig){ if(deaultConfig){ this.defaultConfig = Object.assign(this.defaultConfig, deaultConfig) } } // 默认的请求配置 private defaultConfig:UniRequestConfig = { baseUrl: '', header: {}, timeout: 30000 } // 请求拦截器 private requestInterceptors = [] as UniRequestInterceptor[] // 响应拦截器 private responseInterceptors = [] as UniResponseInterceptor[] // 响应错误拦截器 private responseErrorInterceptors = [] as UniResponseErrorInterceptor[] public interceptors = { request: { use: (ri:UniRequestInterceptor) => { this.requestInterceptors.push(ri) } }, response: { use: (ri:UniResponseInterceptor, ei:UniResponseErrorInterceptor) => { this.responseInterceptors.push(ri) this.responseErrorInterceptors.push(ei) } } } // 发起请求，默认配置是defaultConfig，也可以传入config参数覆盖掉默认配置中某些属性 public request(method: 'GET'|'POST', url:string, data?:D, config?:UniRequestConfig):Promise{ return new Promise((resolve, reject) => { url = (config?.baseUrl || this.defaultConfig.baseUrl) + url let header = config?.header ? Object.assign(this.defaultConfig.header, config.header) : this.defaultConfig.header let timeout = config?.timeout ? config.timeout : this.defaultConfig.timeout let options:UniApp.RequestOptions = { method, url, header, timeout, data, success: (res) => { // 执行响应拦截 for(let ri of this.responseInterceptors){ res = ri(res) } resolve(res as UniRespone) }, fail: (err) => { // 执行响应错误拦截 for(let ei of this.responseErrorInterceptors){ err = ei(err) } reject(err) } } // 执行请求拦截器 for(let ri of this.requestInterceptors){ options = ri(options) } // 发送请求 uni.request(options) }) } // 发起get请求 public get(url:string, params?:D, config?:UniRequestConfig){ return this.request('GET', url, params, config) } // 发起post请求 public post(url:string, data?:D, config?:UniRequestConfig){ return this.request('POST', url, data, config) } } 复制代码使用方法

UniRequest工具类的使用方法跟axios很类似，我这里用举例子的方式来说明。

假如，目前有一个get请求的接口localhost:8000/user，接收一个整数类型的id参数，返回一个User对象，那么代码如下：

// 定义User类型 interface User{ id:number name:string age:number } // 生成UniRequest实例，类似于axios实例 const uniHttp = new UniRequest({ baseUrl:'http://localhost:8000', timeout: 10000 }) // 添加请求拦截器，这个写法是不是和axios很像？ uniHttp.interceptors.request.use(options => { console.log('发起请求：', options.method, options.url) return options }) // 添加响应拦截器，这个写法是不是也和axios很像？ uniHttp.interceptors.response.use( response => { console.log('接收到响应：', response.statusCode, response.data) return response }, err => { console.log('请求出错啦：', err.errMsg) return err } ) // 发起 uniHttp.get('/user', {id: 1}).then( res => { // 这里能自动识别res.data的类型，为User类型 console.log('学生姓名是：', res.data.name) }, err => { console.dir('出错啦', err) } ) 复制代码

由于例子中的接口并不存在，所以请求当然不能得到正确响应，控制台的输出是这样的：

发起请求： GET http://localhost:8000/user

请求出错啦： request:fail

出错啦 {errMsg: 'request:fail'}

可以看到拦截器是正确运行的。

【本文地址】

公司简介

联系我们