当前位置: 首页 > news >正文

uniapp(API-Promise 化)

一、异步的方法,如果不传入 success、fail、complete 等 callback 参数,将以 Promise 返回数据异步的方法,且有返回对象,如果希望获取返回对象,必须至少传入一项 success、fail、complete 等 callback 参数,列如:

 // 正常使用const task = uni.connectSocket({success(res){console.log(res)}})// Promise 化uni.connectSocket().then(res => {// 此处即为正常使用时 success 回调的 res// uni.connectSocket() 正常使用时是会返回 task 对象的,如果想获取 task ,则不要使用 Promise 化console.log(res)})

二、Vue 2 和 Vue 3 的 API Promise 化

PS:

  • Vue2 对部分 API 进行了 Promise 封装,返回数据的第一个参数是错误对象,第二个参数是返回数据。此时使用 catch 是拿不到报错信息的,因为内部对错误进行了拦截。
  • Vue3 对部分 API 进行了 Promise 封装,调用成功会进入 then 方法 回调。调用失败会进入 catch 方法 回调

Vue2:

// 默认方式
uni.request({url: "https://www.example.com/request",success: (res) => {console.log(res.data);},fail: (err) => {console.error(err);},
});// Promise
uni.request({url: "https://www.example.com/request",}).then((data) => {// data为一个数组// 数组第一项为错误信息 即为 fail 回调// 第二项为返回数据var [err, res] = data;console.log(res.data);});// Await
async function request() {var [err, res] = await uni.request({url: "https://www.example.com/request",});console.log(res.data);
}

Vue3:

// 默认方式
uni.request({url: "https://www.example.com/request",success: (res) => {console.log(res.data);},fail: (err) => {console.error(err);},
});// 使用 Promise then/catch 方式调用
uni.request({url: "https://www.example.com/request",}).then((res) => {// 此处的 res 参数,与使用默认方式调用时 success 回调中的 res 参数一致console.log(res.data);}).catch((err) => {// 此处的 err 参数,与使用默认方式调用时 fail 回调中的 err 参数一致console.error(err);});// 使用 Async/Await 方式调用
async function request() {try {var res = await uni.request({url: "https://www.example.com/request",});// 此处的 res 参数,与使用默认方式调用时 success 回调中的 res 参数一致console.log(res);} catch (err) {// 此处的 err 参数,与使用默认方式调用时 fail 回调中的 err 参数一致console.error(err);}
}

返回格式互相转换

Vue2

// Vue 2 转 Vue 3, 在 main.js 中写入以下代码即可
function isPromise(obj) {return (!!obj &&(typeof obj === "object" || typeof obj === "function") &&typeof obj.then === "function");
}uni.addInterceptor({returnValue(res) {if (!isPromise(res)) {return res;}return new Promise((resolve, reject) => {res.then((res) => {if (!res) {resolve(res);return;}if (res[0]) {reject(res[0]);} else {resolve(res[1]);}});});},
});

Vue3:

// Vue 3 转 Vue 2, 在 main.js 中写入以下代码即可
function isPromise(obj) {return (!!obj &&(typeof obj === "object" || typeof obj === "function") &&typeof obj.then === "function");
}uni.addInterceptor({returnValue(res) {if (!isPromise(res)) {return res;}const returnValue = [undefined, undefined];return res.then((res) => {returnValue[1] = res;}).catch((err) => {returnValue[0] = err;}).then(() => returnValue);},
});

http://www.lryc.cn/news/479745.html

相关文章:

  • 【考研数学 - 数二题型】考研数学必吃榜(数二)
  • Redis生产问题(缓存穿透、击穿、雪崩)——针对实习面试
  • android openGL中模板测试、深度测试功能的先后顺序
  • CCF PTA 编程培训师资认证2021年7月真题- C++兑换礼品
  • 火山引擎云服务docker 安装
  • 【taro react】 ---- 常用自定义 React Hooks 的实现【六】之类渐入动画效果的轮播
  • 基础算法练习--滑动窗口(已完结)
  • 深度学习经典模型之ZFNet
  • Linux系统-ubuntu系统安装
  • 2-Ubuntu/Windows系统启动盘制作
  • 你使用过哪些MySQL中复杂且使用不频繁的函数?
  • Redis-07 Redis哨兵
  • 7.qsqlquerymodel 与 qtableview使用
  • 状态模式(State Pattern)详解
  • ajax微信静默登录不起效不跳转问题
  • 参数估计理论
  • mybatis插入数据运行成功但数据库没有数据,id却在增长,是什么原因??
  • Hadoop简介及单点伪分布式安装
  • 网站架构知识之Ansible模块(day021)
  • 是时候用开源降低AI落地门槛了
  • 操作系统学习笔记-5.1-IO设备
  • 页面、组件、应用、生命周期(微信小程序)
  • 书生第四期实训营进阶岛——L2G4000 InternVL 多模态模型部署微调实践
  • 国内 ChatGPT中文版镜像网站整理合集(2024/11/08)
  • SpringBoot整合Liquibase对数据库管理和迁移
  • 太空旅游:科技能否让星辰大海变为现实?
  • [JAVAEE] 面试题(四) - 多线程下使用ArrayList涉及到的线程安全问题及解决
  • Elasticsearch-linux环境部署
  • LeetCode 每日一题 长度为 K 的子数组的能量值
  • 人工智能——小白学习指南