使用promise封装uni.request

最新推荐文章于 2025-08-14 14:54:23 发布
原创 最新推荐文章于 2025-08-14 14:54:23 发布 · 452 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在uni-app项目中封装HTTP请求。首先，在项目根目录创建request文件夹及request.js文件，用于封装uni.request API。通过创建Promise对象并调用内置API实现请求的成功或失败数据返回。封装完成后，将其导入并在main.js中挂载到Vue原型上，使所有页面均可调用。

首先在项目根目录下创建一个request文件夹

文件夹里创建一个request.js文件，用来封装uni.request

如图：
在这里插入图片描述

然后进行封装
在这里插入图片描述

创建一个promise对象，调用uni.request()内置api，返回成功或失败数据，将请求数据所需地址、参数、请求类型作为形参

封装过后导出，并在根目录下的main.js文件中全局引入且挂载到vue原型上，由此一来，每个页面都可以调用

如图：
在这里插入图片描述

在需要调用该请求的页面，推荐在method中，使用async和await，同步化封装请求事件，方便调用及链式书写

墨·漓
关注
基于promise封装unirequest 网络请求 async+await
qq_33871182的博客
04-02 715
新建httpService.js let http = { 'baseUrl':'http://120.79.22.16',//测试url地址 'uploadURL':'/uploadify/upload', 'getfileURL':'/kindeditor/initfiles', 'get': get, 'post': post, 'uncookieRequest':...
使用uniapp封装uni.request
liu62615的博客
05-26 575
创建utils文件夹，创建httpRequesrt.ts。
uniapp Promise封装全局uni.request网络请求
2401_86332692的博客
08-03 2678
在一个项目开发时，我们除了页面布局之外，就是数据处理了，封装一个全局的网络请求，有助于我们处理一些公用逻辑代码，更加专注于业务代码。
使用Promise封装uni.request请求
weixin_45841604的博客
03-30 588
使用Promise封装uni.request请求 在项目下创建https文件夹 其中baseUrl.js存放的是基础路径 const baseUrl = 'https://xxx.xxx.xx.com'; const imgUrl ='https://xxxx.xxxx.com'; export { baseUrl,// 基础路径地址 imgUrl,//图片查看地址 }; request.js import { baseUrl } from './baseUrl.js' export func
使用Promise对uni.request进行封装
SilentLand的博客
11-03 3793
为什么需要封装 想用Promise，而uni.request并不返回Promise 请求方法逻辑类似，可以写一个公共的请求方法 封装 原方法 // 轮播图请求 getSwiperdata() { this.request() }, // 公共请求方法 request() { uni.request({ url: 'https://www.uinav.com/api/public/v1/home/swiperdata',
uniapp 请求封装 uni.request 封装 详细封装流程
weixin_45563734的博客
07-16 671
uniapp 请求封装 uni.request 封装 详细封装流程
UniApp中封装uni.request请求，简化代码！
番茄Salad
06-06 514
【代码】UniApp中封装uni.request请求，简化代码！
Uniapp 中 uni.request 的二次封装
最新发布
qq_48763502的博客
08-14 574
在 Uniapp 项目中，对进行二次封装可以提高代码复用性、统一处理错误和简化 API 调用。
uniapp中uni.request的统一封装 (ts版)
专研技术的大学生:会点Java和前端
09-30 2385
在uniapp中如何去更简洁高效的发送我们的请求，下面就介绍了uni.request()二次封装。
利用ES6新增语法Promise对uni.request请求的简单封装。
m0_62154751的博客
09-29 747
利用ES6新增语法Promise对uni.request请求的简单封装。
Promise封装uni.request
weixin_57748957的博客
05-19 224
1.在根目录新建一个http文件夹，里边放一个js文件，(名字自取，最好要语义化) 2.在js文件里写上以下代码，跟在微信小程序里封装的wx.request都大同小异，封装然后导出 module.exports = { request(url,method,data){ return new Promise((reslove,reject)=>{ uni.request({ url:"http://api.intewl.cn/api"+url, data:data,
promise封装uniapp中的uni.request
fightte的博客
09-27 468
简介 在uniapp项目中，封装request请求，来实现代码的重用性。 ~ uni.request发包： 常规操作： uni.request({ url:"http://www.xxxxxx.com/xxx.php", data:{ username:username, passwd:passwd }, header:{ 'content-type': 'application/x-www-form-urlencoded'
uni-app案例学习【1】Promise封装uni.request请求
Enchanted to meet U
07-22 496
要求：封装uni.request请求，并挂载到全局 1.创建util/api.js // 封装get请求 const baseUrl = "http://localhost:8082" export const myRequest = (options)=>{ return new Promise((resolve,reject)=>{ uni.request({ method: options.method, data: options.data, url: baseU
基于Promise封装uni-app的request方法，实现类似axios形式的请求
weixin_30325793的博客
03-27 385
https://my.oschina.net/u/2428630/blog/3004860 uni-app框架中 安装（项目根目录下运行） npm install uni-request --save 文件中引用 import uniRequest from 'uni-request'; 使用方法 请求方法的别名 uniRequest.request(con...
uni.request基于Promise封装
2301_77332332的博客
06-01 466
title: "表示参数填写错误，往往是开发者填写参数不对造成的",console.log("返回结果：：：", res);//请求头配置，通常是token，自定义头信息。title: "没有访问权限",title: "文件未找到",title: "服务器错误",//Base64.encode(要加密的字符串);//Base64.decode(要解密的字符串);//基于Promise封装uni.request。//再通过接拼"Basic "传递给后台。//先加载loading。//处理token的函数。
基于Promise封装uni-app的request方法，实现类似axio
weixin_30426065的博客
06-06 717
uni-request 基于Promise封装uni-app的request方法,h5和小程序均可使用 特别之处 支持Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换为JSON数据 超时请求 告别callback 支持默认请求前缀 支持并发请求 使用方式 uni-app框架中 安装（项目根目录下运行）...
普歌-uniapp中request请求封装和使用（promise）
BZJ0528_的博客
05-05 506
uniapp中request请求封装和使用(promise) 开发时我们使用本地的请求地址，而在项目上线时会使用线上的地址，并且每个请求所含的参数和请求方式都不大相同，那么在开发时对请求进行封装就是必要的 如图，先新建文件夹api，然后创建js文件 1.请求接口地址request.js // 公用地址 let url = '域名/api/' // 配置接口文档路径 let getpreferurl = `${url}forshop/getprefer` export{getpreferurl} 2.错
【uniapp&微信小程序】封装uni.request()
热门推荐
Ghmin的博客
02-27 1万+
在项目开发过程中，往往需要对请求进行二次封装，这篇文章将对uni.request()进行二次封装，并实现多个环境的请求配置，对请求方式，数据格式等进行封装，将请求做到最简化。可以看到，封装之后的请求已经非常精简，配置好各个环境地址，根据请求方式，数据格式，选择对应的封装方法即可。
使用ts文件封装uni.request
04-02
以下是一个使用TypeScript封装uni.request的示例代码： ```typescript interface RequestOptions extends UniApp.RequestOptions { url: string; } function request(options: RequestOptions): Promise<any> { return new Promise((resolve, reject) => { uni.request({ ...options, success(res) { resolve(res.data); }, fail(res) { reject(new Error(`request fail, statusCode=${res.statusCode}`)); }, }); }); } export default request; ``` 这个封装函数接受一个RequestOptions类型的参数，这个类型是在UniApp中预定义的请求参数类型的扩展，加上了一个必须的url属性。在函数内部，使用Promise封装uni.request方法，通过success和fail回调函数来判断请求是否成功，并返回相应的结果或错误信息。 使用时，可以这样调用： ```typescript import request from '@/utils/request'; async function fetchData() { try { const data = await request({ url: 'https://example.com/api', method: 'GET', }); console.log(data); } catch (error) { console.error(error); } } ``` 这里使用了async/await语法来简化异步请求的写法，并使用try/catch语句来处理请求错误。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值