用思维导图梳理的 Promise,看完这篇就够了

1.对 Promise 的理解

2.什么是Promise链?

let promise=new Promise((resolve,reject)=>{
	const control=true
	control && resolve(res); //如果control为true,就执行resolve(res)
	reject(err)				//若为false,就执行reject(err)
}
promise
  .then( res=> console.log(res), err=>console.log(err))
  .catch( error => console.log(error))
  .finally( () =>console.log('finally#1'));

3.Promise有哪些静态方法?

比较常用的是 promise.all() 和 promise.race()

1.promise.all() 示例

const promise1 = fetch('https://api.example1.com/data');
const promise2 = fetch('https://api.example2.com/data');
const promise3 = fetch('https://api.example3.com/data');

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    return Promise.all(results.map(r => r.json()));
  })
  .then((data) => {
    console.log(data); // data 是一个包含了三个 API 响应结果的数组
  })
  .catch((error) => {
    console.error('其中一个请求失败：', error);
  });

2.promise.race() 示例

const p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'p1 完成');
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'p2 完成');
});

Promise.race([p1, p2])
  .then((result) => {
    console.log(result); // 'p2 完成', 因为 p2 比 p1 完成得更快
  })
  .catch((error) => {
    console.error('有一个 promise 被拒绝：', error);
  });

// 超时控制的示例
const fetchWithTimeout = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('请求超时')), 5000);
});

Promise.race([fetch('https://api.example.com/data'), fetchWithTimeout])
  .then((result) => {
    return result.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('错误：', error);
  });

3.promise.allSettled() 示例

// Promise.allSettled 示例
const promise4 = Promise.resolve(3);
const promise5 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, 'error');
});
const promise6 = Promise.resolve(42);

Promise.allSettled([promise4, promise5, promise6]).then(results => {
  results.forEach(result => console.log(result));
  // {status: 'fulfilled', value: 3}
  // {status: 'rejected', reason: 'error'}
  // {status: 'fulfilled', value: 42}
});

4.基于promise 的async/await语法:

自从ES2017引入 async/await 语法以后, 处理异步操作变得更加直观明了。
不过, 本质上,async 声明一个函数是异步的, await 会暂停异步函数的执行, 等待Promise解决后再继续执行。

let myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Success!");
    }, 1000);
});

myPromise.then(result => {
    console.log(result); // "Success!"
}).catch(error => {
    console.log(error);
});

async function asyncFunction() {
    try {
        let result1 = await promise1; // 等待 promise1 完成
        console.log(result1);
        let result2 = await promise2; // 等待 promise2 完成
        console.log(result2);
    } catch (error) {
        console.error(error);
    }
}

asyncFunction();

在上面的代码中, 函数 asyncFunc 在碰到 await 关键字时, 会暂停执行, 知道myPromise 被resolved 之后继续执行。

拓展: 使用 Aysnc/Await 时需要注意异常处理, 可以用 try…catch 语句来捕获异常。

5.如何用 JS 实现Promise.all()方法? 请写出具体代码

function myPromiseAll(promises){
	return new Promise((resolve,reject)=>{
		if(!Array.isArray(promises))	reject('typeError')
		promises.length === 0 && resolves(promises)
		const results=[]
		let count=0
		promises.forEach((p,index)=>{
			Promise.resolve(p).then(res=>{
				results[index]=res;
				count++
				count === promises.length && resolve(results)
			},err=>{
				reject(err)
			})
		})
	})
}

6.如何用 JS 实现Promise.race()方法? 请写出具体代码

function myPromiseRace(promises){
	return new Promise((resolve,reject)=>{
		if(!Array.isArray(promises))	reject('typeError')
		promises.length === 0 && resolves(promises)
		promises.forEach(p=>{
			Promise.resolve(p).then(res=>resolve(res),err=>reject(err))
		})
	})
}

// 测试代码
const p1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, 'one');
});

const p2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'two');
});

myPromiseRace([p1, p2]).then(value => {
    console.log(value); // "two"
}).catch(error => {
    console.log(error);
});

7. promise.all() .race() .allSettled() .any()的区别

8. 使用Promise.race() 实现一个带有超时控制的请求函数

function fetchWithTimeout(url, timeout) {
    const fetchPromise = fetch(url);
    const timeoutPromise = new Promise((undefined, reject) => {
        setTimeout(() => reject(new Error('Request timed out')), timeout);
    });

    return Promise.race([fetchPromise, timeoutPromise]);
}

// 使用示例
fetchWithTimeout('https://jsonplaceholder.typicode.com/posts', 1000)
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error('Error:', error));

9.JS实现一个带并发限制的异步调度器 [字节面试题]

js实现一个带并发限制的异步调度器, 保证同时运行的任务最多有两个。完善代码中的 Scheduler 类, 使得以下程序能正确输出:

class Scheduler{
    add(promiseCreator){
        //...
    }
    //...
}

const timeout=time=> new Promise(resolve=>{
    setTimeout(resolve,time);
})

const scheduler=new Scheduler();
const addTask=(time, order)=>{
    scheduler.add(()=>timeout(time)).then(()=> console.log(order))
}

addTask(1000,'1')
addTask(500,'2')
addTask(300,'3')
addTask(400,'4')

//output: 2 3 1 4

答案:

class Scheduler{
    constructor(){
        this.queue = new Set()
    }
    add(promiseCreator){
        if(this.queue.size>=2){
            return Promise.race(Array.from(this.queue).map(i=>i)).finally(()=>this.add(promiseCreator))
        }else{
            const proInstance = promiseCreator()
            this.queue.add(proInstance)
            proInstance.finally(()=>{
                this.queue.delete(proInstance)
            })
            return proInstance
        }
    }
}

const timeout=time=> new Promise(resolve=>{
    setTimeout(resolve,time);
})

const scheduler=new Scheduler();
const addTask=(time, order)=>{
    scheduler.add(()=>timeout(time)).then(()=> console.log(order))
}

addTask(1000,'1')
addTask(500,'2')
addTask(300,'3')
addTask(400,'4')