- APP神圣官网 > 官方版本 > 正文
项目appuniluchrequest(自定义项目操作插件多个)「项目item」
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台项目的开发离不开数据交互,一个好的request请求库可以让我们的开发事半功倍uni-app也不例外,uni.request只提供基础请求功能,无法达到项目开发的要求,luch-request应运而生luch-request官网luch-request是什么?luch-request 是一个基于Promise 开发的uni-app跨平台、项目级别的请求库,它有更小的体积,易用的api,方便简单的自定义能力luch-request诞生于19-05月,至今已迭代20多个版本DCloud插件市场request类插件下载量第一支持npm下载它能为我们解决什么问题?支持全局挂载支持多个全局配置实例支持自定义验证器支持文件上传/下载支持task 操作支持自定义参数支持多请求拦截器/响应拦截器对参数的处理比uni.request 更强也许你还不明白这些有什么用但是他却对应着我们开发中一个一个的痛点你的数据获取方式uni.request({ url: this.$baseUrl + 'api/user?arg1=data1' method: 'POST', data: {id:1}, header: {Content-Type: '...', token: '....'} success: (res) => {}, fail: (err) => {}})
使用luch-request后this.$http.post('/api/user', {id: 1}, {params: {arg1: data1}}).then(res => {...}).catch(err => {...})
它有什么优势?条件编译开发:减少代码体积,减少开发中debug时的误导影响看不到对应终端额外的参数极易的自定义能力:有些插件会把loading、auth等参数加入配置,使其做一些请求之外的操作,这些配置并不是所有人都会使用request请求库只需专注于请求即可luch-request对额外操作的处理则更为优雅,增加了` custom `配置,使开发者可以做一些自定义操作http.setConfig((config) => { / config 为默认全局配置/ config.baseURL = 'http://www.quanzhan.co' / 根域名 / config.custom = { loading: true // 默认有loading } return config})http.interceptors.request.use((config) => { / 请求之前拦截器可以使用async await 做异步操作 / config.header = { ...config.header, a: 1 // 演示拦截器header加参 } // 演示custom 用处 if (config.custom.loading) { uni.showLoading() } return config}, (config) => { return Promise.reject(config)})http.interceptors.response.use(async (response) => { / 请求之后拦截器可以使用async await 做异步操作 / // if (response.data.code !== 200) { // 服务端返回的状态码不等于200,则reject() // return Promise.reject(response) // } if (response.config.custom.loading) { uni.hideLoading() } return response}, (response) => { // 请求错误做点什么可以使用async await 做异步操作 console.log(response) if (response.config.custom.loading) { uni.hideLoading() } return Promise.reject(response)})// 单接口不想要loadinghttp.get('user/list', {custom: {loading: false}})http.post('user/list', {}, {custom: {loading: false}})
易用的api设计:部分api设计为降低学习成本,参照axios设计并扩展一些其它的api,入门更加容易...快速上手npmnpm i luch-request -S
cli 用户使用npm 包需增加以下配置项目根路径下创建vue.config.js 文件,增加以下内容// vue.config.js module.exports = { transpileDependencies: ['luch-request'] }
GitHubhttps://github.com/lei-mu/luch-request
使用DCloud/luch-request 文件夹即可DCloud插件市场https://ext.dcloud.net.cn/plugin?id=392
luch-request DCloud 插件市场luch-request官网https://www.quanzhan.co/luch-request/https://www.quanzhan.co/luch-request/
luch的博客网站logo更新历史https://github.com/lei-mu/luch-request/releases
联系我们
在线咨询:
0 评论