深圳小鹅网络前端校招视频面试

2021.03.11 下午 深圳小鹅

promise.all()方法有什么用

Promise.all() 方法接收一个promise的iterable类型（Array，Map，Set都属于ES6的iterable类型）的输入，并且只返回一个Promise实例

输入的所有promise的resolve回调的结果是一个数组。这个Promise的resolve回调执行是在所有输入的promise的resolve回调都结束，或者输入的iterable里没有promise了的时候。

它的reject回调执行是，只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误，并且reject的是第一个抛出的错误信息。

Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例，一次性处理n个Promise对象。

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

let p3 = Promse.reject('失败')

//p1和p2是两个Promise实例，包装成一个数组类型作为参数输入
Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})
//只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数
Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了，打出 '失败'
})

Promse.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。

注意：Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。

好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

promise.then()的第二个参数是什么，具体实现了什么

1）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pcTUb3eQ-1617416519097)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615475364524.png)]

var p1 = new Promise((resolve,reject)=>{
	resolve();
	reject();
})
p1.then(()=>{
	console.log("then的第一个参数")；
},()=>{
	console.log("then的第二个参数")；
}).catch(()=>{
	console.log("catch输出")；
})
//输出 then的第一个参数

如果then添加了第二个参数，这时候就不会执行catch里面的代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rfED0aOQ-1617416519102)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615475486540.png)]

var p2 = new Promise((resolve,reject)=>{
	reject();
	resolve();
})
p2.then(()=>{
	console.log("then的第一个参数")；
},()=>{
	console.log("then的第二个参数")；
}).catch(()=>{
	console.log("catch输出")；
})
//输出 then的第二个参数

2）Promise中的then不添加第二个参数，这时候就会执行catch里面的代码

var p3 = new Promise((resolve,reject)=>{
	reject();
	resolve();
})
p3.then(()=>{
	console.log("then的参数")；
}).catch(()=>{
	console.log("catch输出")；
})
//输出 catch输出

3）Promise的链式结构原理是pro.then()或pro.catch()这个函数执行的返回值会返回一个promise对象，所以可以继续调用then或者catch，来完成链式结构。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ECtn8kkd-1617416519110)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615476173724.png)]

var pro=new Promise((resolve,reject)=>{
    resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
},()=>{console.log('reject1')}).catch(()=>{
    console.log('catch1')
}).then(()=>{
    console.log('resolve2');
},()=>{console.log('reject2')}).catch(()=>{
    console.log('catch2');
}).then(()=>{
    console.log('resolve3');
})
//输出resolve1 resolve2 resolve3

“promise执行完毕后返回的promise默认进入fulfilled状态”，所以执行完毕后默认执行链式结构中的resolve回调。

var pro=new Promise((resolve,reject)=>{
    // resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
},()=>{console.log('reject1')}).catch(()=>{
    console.log('catch1')
}).then(()=>{
    console.log('resolve2');
},()=>{console.log('reject2')}).catch(()=>{
    console.log('catch2');
}).then(()=>{
    console.log('resolve3');
})
//reject1 resolve2 resolve3

执行进入失败状态后，链式结构也会执行之后的resolve回调。

var pro=new Promise((resolve,reject)=>{
    resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
},()=>{console.log('reject1')).catch(()=>{
    console.log('catch1')
}).catch(()=>{
    console.log('catch2');
})
//输出结果 resolve1

如果不存在then，则也不会执行catch里面的代码，因为默认进入fullfilled状态。需要记住的点是，进入什么状态就会什么代码。

4）then里面的resolve报错，catch是可以捕获报错信息，then的第二个参数不能捕获，resolve的回调执行报错可以被catch捕获到

var pro=new Promise((resolve,reject)=>{
    resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
    var a = undefined;
    a.b();
    console.log('报错了的代码');
},(err)=>{console.log('reject1',err)}).catch((err)=>{
    console.log('catch1',err);
}).then(()=>{
    console.log('resolve2');
}).catch(()=>{
    console.log('catch2');
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MaGOnfNU-1617416519114)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615476781052.png)]

Promise里面执行的代码可以被then的第二个参数捕获到,并且不会进入到resolve，而是直接进入reject

没有执行resolve代码，直接进入了reject

var pro=new Promise((resolve,reject)=>{
    var a = undefined;
    a.b();
    resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
    console.log('报错了的代码');
},(err)=>{console.log('reject1',err)}).catch((err)=>{
    console.log('catch1',err);
}).then(()=>{
    console.log('resolve2');
}).catch(()=>{
    console.log('catch2');
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UITVihqG-1617416519120)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615476872970.png)]

就算没有reject回调，还是会进入reject回调

var pro=new Promise((resolve,reject)=>{
    var a = undefined;
    a.b();
    resolve();
    console.log('报错了的代码reject之前');
    // reject();
    console.log('报错了的代码reject之后');
})
pro.then(()=>{
    console.log('resolve1');
    console.log('报错了的代码');
},(err)=>{console.log('reject1',err)}).catch((err)=>{
    console.log('catch1',err);
}).then(()=>{
    console.log('resolve2');
}).catch(()=>{
    console