微信小程序中Promise封装request请求
一、Promise简单的封装使用
1、简单的封装函数
// promise发起网络请求 //发起网络请求 支持跨域 请求与处理在一起,通过回调方式来进行,避免回调地狱 //解决回调地狱 es6提供promise ==> es7 async await(目前微信小程序不支持) //使用promise 请求与处理分离 reqData(){ return new Promise((suc,err)=>{ var reqTask = wx.request({ url: 'https://www.baidu.com', data: {}, header: {'content-type':'application/json'}, method: 'GET', dataType: 'json', responseType: 'text', success: (ret)=>suc(ret), fail: ()=>err, complete: ()=>{} }); }) },
2、wxml文件
<button class="btn" type="primary" bindtap="onTap"> 按钮文本 </button>
3、调用函数(使用)
//使用 onTap(){ let p1=this.reqData(); //p表示promise对象 //promise對象中有then表示成功處理,catch表示失败处理 //then 可以传2个参数,第1从参数,成功处理;第2参数,失败处理 //then(succ=>{},err=>{}) //解决回调问题,同时Promise没有让return权力消失 p1.then(ret1=>{ console.log(ret1); let p2=this.reqData(); return p2 }).then(ret2=>{ console.log(ret2) }) }
二、封装成所有页面共用的函数
1、在主目录下utils创建新的js文件http.js
2、封装函数
function httpRequest(url,data={},method){ return new Promise((resolve, reject)=>{ wx.request({ url, data, header: {'content-type':'application/json'}, method, dataType: 'json', success:ret=> resolve(ret), fail:err=>reject(err) }) }) } //导出函数 export {httpRequest};
3、可以在任何页面导入使用
import {httpRequest} from '../../utils/http.js' // pages/model/model.js Page({ data: { }, onTap2(){ let url="https://www.baidu.com/" httpRequest(url).then(ret=>{ console.log(ret) }) },
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!