promise与 fetch、async/await_fetch async 获取结束标志-CSDN博客

手写promise A+、catch、finally、all、allsettled、any、race-CSDN博客

【建议星星】要就来45道Promise面试题一次爽到底(1.1w字用心整理) - 掘金

目录

每隔1秒输出1,2,3

红黄绿灯交替亮

按序执行数组

异步加载图片

---

每隔1秒输出1,2,3

const arr = [1, 2, 3]
arr.reduce((p, x) => {return p.then(() => {return new Promise(r => {setTimeout(() => r(console.log(x)), 1000)})})
}, Promise.resolve())

红黄绿灯交替亮

function red() {console.log("red");
}
function green() {console.log("green");
}
function yellow() {console.log("yellow");
}
const light = function (timer, cb) {return new Promise(resolve => {setTimeout(() => {cb()resolve()}, timer)})
}
const step = function () {Promise.resolve().then(() => {return light(3000, red)}).then(() => {return light(2000, green)}).then(() => {return light(1000, yellow)}).then(() => {return step()})
}step();

按序执行数组

const time = (timer) => {return new Promise(resolve => {setTimeout(() => {resolve()}, timer)})
}
const ajax1 = () => time(2000).then(() => {console.log(1);return 1
})
const ajax2 = () => time(1000).then(() => {console.log(2);return 2
})
const ajax3 = () => time(1000).then(() => {console.log(3);return 3
})function mergePromise (ajaxArray) {// 存放每个ajax的结果const data = [];let promise = Promise.resolve();ajaxArray.forEach(ajax => {// 第一次的then为了用来调用ajax// 第二次的then是为了获取ajax的结果promise = promise.then(ajax).then(res => {data.push(res);return data; // 把每次的结果返回})})// 最后得到的promise它的值就是datareturn promise;
}mergePromise([ajax1, ajax2, ajax3]).then(data => {console.log("done");console.log(data); // data 为 [1, 2, 3]
});// 要求分别输出
// 1
// 2
// 3
// done
// [1, 2, 3]

异步加载图片

function loadImg(url) {return new Promise((resolve, reject) => {const img = new Image();img.onload = function() {console.log("一张图片加载完成");resolve(img);};img.onerror = function() {reject(new Error('Could not load image at' + url));};img.src = url;});