promise示例

6 篇文章 0 订阅

1、等图片加载完后获取图片的尺寸,后续可以判断尺寸是否符合要求

    const getImageSize: any = (url) => {
        let size = {
            width: 0,
            height: 0,
        }
        let img = new Image();
        img.src = url;
        return new Promise(resolve => {
            img.onload = () => {
                const { width, height } = img;
                size = {
                    width,
                    height
                }
                img.onload = null;
                return resolve(size);
            };
            img.onerror = () => {
                message.error('图片加载失败,获取不到图片尺寸,请重新上传');
                img.onerror = null;
                return resolve(size);
            };
        })
    };

使用:

const size = await getImageSize(url);
if (size.width!==width && size.height!==height) {
   message.error(`请上传尺寸为${width}px*${height}px的图片`);
}

2、批量获取接口,比如一个页面中有好几个地方需要根据相应的id获取对应的活动列表

const getBatchActivityList: any = (idList) => {
    return Promise.all(idList.map(id => {
        if (!id) return Promise.resolve(null);
        return getJKTActivityInfo({activityId: id});
    })).catch(() => {
        message.error('获取活动列表数据失败,请刷新重试')
    });
}

使用:

const resArr = await getBatchActivityList(idList);
resArr && resArr.forEach((res, i) => {
    if (res) {
        const { tagSummaryList, summary } = res;
        tagSummaryListArr[i] = tagSummaryList;
        jktSummaryList[i] = summary;
    }
});

 

下面是一个使用原生 Promise 的代码示例: ```javascript // 创建一个 Promise 对象 const myPromise = new Promise((resolve, reject) => { // 模拟一个异步操作 setTimeout(() => { const randomNumber = Math.random(); if (randomNumber < 0.5) { // 如果随机数小于0.5,表示操作成功,调用 resolve resolve(randomNumber); } else { // 如果随机数大于等于0.5,表示操作失败,调用 reject reject(new Error('操作失败')); } }, 1000); }); // 调用 Promise 的 then 方法处理异步操作的结果 myPromise.then((result) => { console.log('操作成功,结果为: ', result); }).catch((error) => { console.error('操作失败,错误为: ', error); }); ``` 在这个示例中,我们创建了一个 Promise 对象,并在 Promise 的构造函数中定义了一个异步操作。在异步操作完成后,根据操作的结果调用 resolve 或 reject。然后我们使用 Promise 的 then 方法处理操作成功的结果,使用 catch 方法处理操作失败的情况。这样可以更好地处理异步操作的结果和错误。 请注意,这只是一个简单的示例,实际使用中可能会有更复杂的场景和更多的链式调用。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [promises:使用原生 Promise示例和有用提示](https://download.csdn.net/download/weixin_42129113/19712556)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [利用Promise自定义一个GET请求的函数示例代码](https://download.csdn.net/download/weixin_38509656/13631246)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值