面试题：JavaScript中结合回调函数与Promise的复杂应用场景及实现

Question

假设你正在开发一个复杂的前端应用，其中部分旧代码使用回调函数处理异步，新功能需要用Promise。描述一个可能出现的复杂应用场景，并给出如何将两者结合使用的具体实现思路及关键代码示例。

Answer 1

复杂应用场景

在一个电商前端应用中，旧代码负责处理商品图片的预加载，采用回调函数方式。新功能则是在图片预加载完成后，根据用户的会员等级，从服务器获取相应的专属优惠信息，这部分使用Promise。例如，图片预加载可能需要从不同的CDN获取，而优惠信息的获取依赖于复杂的身份验证和权限判断。

结合使用的实现思路

1. 将回调函数包装成Promise：对于旧的图片预加载回调函数，使用new Promise将其包装，使其可以融入Promise的链式调用。
2. 链式调用：在图片预加载Promise完成后，通过.then方法，发起获取优惠信息的Promise请求。

关键代码示例

// 模拟旧的图片预加载回调函数
function preloadImage(src, callback) {
    const img = new Image();
    img.onload = () => callback(null, img);
    img.onerror = (error) => callback(error);
    img.src = src;
}

// 将回调函数包装成Promise
function preloadImagePromise(src) {
    return new Promise((resolve, reject) => {
        preloadImage(src, (error, img) => {
            if (error) {
                reject(error);
            } else {
                resolve(img);
            }
        });
    });
}

// 模拟获取优惠信息的Promise
function getExclusiveOffer(memberLevel) {
    return new Promise((resolve, reject) => {
        // 模拟异步操作，这里使用setTimeout
        setTimeout(() => {
            if (memberLevel === 'gold') {
                resolve('10% off on all products');
            } else {
                reject('No exclusive offer for this member level');
            }
        }, 1000);
    });
}

// 使用Promise链结合两者
const memberLevel = 'gold';
preloadImagePromise('product.jpg')
  .then((img) => {
        console.log('Image preloaded successfully:', img);
        return getExclusiveOffer(memberLevel);
    })
  .then((offer) => {
        console.log('Exclusive offer:', offer);
    })
  .catch((error) => {
        console.error('Error:', error);
    });