前端手写代码题

48 阅读2分钟

Promise相关

promise.all

Promise.all 接收一个 promise 对象的数组作为参数,当这个数组里的所有 promise 对象全部变为resolve或 有 reject 状态出现的时候,它才会去调用 .then 方法,它们是并发执行的。

var p1 = Promise.resolve(1),
    p2 = Promise.resolve(2),
    p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    console.log(results);  // [1, 2, 3]
});

在上面的方法中,promise 数组中所有的 promise 实例都变为resolve 的时候,该方法才会返回,并将所有结果传递 results 数组中。promise 数组中任何一个 promisereject 的话,则整个 Promise.all 调用会立即终止,并返回一个 reject 的新的 promise 对象。reject 使用示例如下:

var p1 = Promise.resolve(1),
    p2 = Promise.reject(2),
    p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    //then方法不会被执行
    console.log(results);
}).catch(function (e){
    //catch方法将会被执行,输出结果为:2
    console.log(2);
});

总结 promise.all 的特点

1、接收一个 Promise 实例的数组或具有 Iterator 接口的对象,

2、如果元素不是 Promise 对象,则使用 Promise.resolve 转成 Promise 对象

3、如果全部成功,状态变为 resolved,返回值将组成一个数组传给回调

4、只要有一个失败,状态就变为 rejected,返回值将直接传递给回调
all() 的返回值也是新的 Promise 对象

function promiseAll (promises) {
	if (!Array.isArray(promises)) {
		throw new Error ("promises must to be an array!!!");
	}
	return new Promise (function (resolve, reject) {
            let promiseNum = promises.length;
            let resolvedCount = 0;
            let resolveValues = new Array(promiseNum);
            try {
                for (let i = 0; i < promiseNum; i++) {
                     promises[i].then(function (value) {
                         resolveValues[i] = value;
                            if (++resolvedCount === promiseNum) {
                                resolve(resolveValues);
                            }
                })
		} catch (error) {
			reject(error);
		}
	})
}


promise.race

Promise.race 从字面意思理解就是赛跑,以状态变化最快的那个 Promise 实例为准,最快的 Promise 成功 Promise.race 就成功,最快的 Promise 失败 Promise.race 就失败。

const realizePromiseRace = (promises: any[]) => {

    return new Promise((res, rej) => {
      if (!promises || !Array.isArray(promises)) {
        return rej(new TypeError('arguments must be an array'));
      }

      for (const item of promises) {
        Promise.resolve(item).then((data) => {
          return res(data);
        }).catch((err) => {
          return rej(err);
        });
      }
    });
  }