Uniapp之API promise化

最新推荐文章于 2024-11-07 15:58:32 发布

✎﹏ℳ๓敬坤

最新推荐文章于 2024-11-07 15:58:32 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： # uniapp 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44291585/article/details/121720648

uniapp 专栏收录该内容

20 篇文章

订阅专栏

本文详细讲解了Vue2和Vue3中Promise的使用方法，并对比了两者在API异步操作中的不同。重点介绍了如何将uniapp API Promise化以及常见策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次要点：

1.promise是什么？

2.promise怎么使用？

1.promise是什么？

promise是一个对象，它代表了一个异步操作的最终完成或者失败。

2.promise怎么使用？

接下来看一下我们之前是如何调用uniapp里面的API的：

//这是一个request请求
uni.request({
    url: 'https://www.example.com/request',
    success: (res) => {
        console.log(res.data);
    },
    fail:(err) => {
        console.error(err)
    }
});

接下来会分别展示Vue2和Vue3使用promise的区别：

Vue2 promise如下：

uni.request({
    url: 'https://www.example.com/request'
})
.then(data => {
    // data为一个数组
    // 数组第一项为错误信息 即为 fail 回调
    // 第二项为返回数据
    var [err, res]  = data;
    console.log(res.data);
})

Vue3 promise如下：

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)
})

具体 API Promise化 的策略：

1.异步的方法，如果不传入 success、fail、complete 等 callback 参数，将以 Promise 返回数据

2.异步的方法，且有返回对象，如果希望获取返回对象，必须至少传入一项 success、fail、complete 等 callback 参数

分享不易，都观看到这里了，还不点赞收藏嘛！