Promise应用

// 超时控制
Promise.race([fetchPromise(2000), delayPromise(1000)]);
/**
 * 延迟函数
 * @param {number} time 延迟时间，超出后结束请求
 */
function delayPromise(time) {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            reject(new Error('timeout'));
        }, time);
    })
};
/**
 * 请求函数 
 * @param {number} delay 模拟请求耗时
 */
function fetchPromise(delay) {
    return new Promise((resolve, reject) => {
        // fetch(url).then(res => {
        //    resolve(res);
        // }).catch(err => {
        //    reject(err);
        // });
        setTimeout(() => resolve('request'), delay)
    })
};

// 转盘问题
// 请求比转动动画快，等待转动结束
// 请求比转动动画慢，等待返回结果
/**
* @description: 转盘问题
* @param {number} timeout 超时时间
* @param {number} reqestTime 请求耗时
* @param {number} animateTime 动画时间
*/

let timeout = 3000,
    reqestTime = 2000,
    animateTime = 1000;
// css动画时间
function animatePromise(animateTime) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('animate')
        }, animateTime);
    })
}
// 请求耗时2000ms，超时控制3000ms，动画时间1000ms
console.log('start')
Promise.all([
    Promise.race([fetchPromise(reqestTime), delayPromise(timeout)]),
    animatePromise(animateTime)
]).then(data => {
    console.log('data => ', data)
    console.log('stop')
}).catch(e => {
    console.log(e)
});

// 取消重复请求（项目中一般应用axios.CancelToken）
class CancelPromise {
    constructor() {
        this.pending = null;
        this.reject = null;
    }

    request(fetch) {
        if (this.pending) {
            console.log('请求未结束')
            this.cancel()
        } else {
            console.log('aaaaaaaaaa')
        };
        this.pending = Promise.race([
            fetch,
            new Promise((resolve, reject) => {
                this.reject = reject
            })
        ]);
        return this.pending;
    }

    cancel() {
        this.reject('取消请求');
        this.pending = null;
    }
}

let cancelPro = new CancelPromise()

cancelPro.request(fetchPromise(1000)).then(res => console.log(res)).catch(e => console.log(e))

// 限制最大并发请求 Promise.allSettled([])
function multiReq(urls = [], max) {
    
    function fetchPromise(url) {
        return () => {
            return new Promise((resolve, reject) => {
                setTimeout(() => resolve('request' + url), 3000)
            })
        }
    };
    
    let fetchs = [];
    for (let i = 0; i < urls.length; i++) {
        fetchs.push(fetchPromise(urls[i]))
    };

    let res = [],
        num = 0;

    function addReq() {
        let func = fetchs.shift()
        func().then(data => {
            console.log(data)
            res.push(data);
            console.log(res.length, fetchs.length)
            if (fetchs.length > 0) {
                addReq();
            };
            console.log(res.length, urls.length)
        });
        // .catch(e => {
        //     console.log('err', e)
        //     res.push(e)
        // }).finally(() => {
        //     console.log('finally', num)
        // })
    }
    
    while (num < max) {
        console.log(num)
        num++;
        addReq();
    }
}