携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第三天，点击查看活动详情
promise，简单来说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作的结果)
先来打印一下promise看看到底是什么？
我们可以看到它身上的一些方法
Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch方法喽
Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。
resolve是将Promise的状态置为fullfiled，
reject是将Promise的状态置为rejected。
var p = new Promise((resolve, reject) =>{
//做一些异步操作 setTimeout(function(){
console.log('执行完成');
resolve('随便什么数据');
}, 2000);
});
async await
关注一下执行顺序。
async
async 用于申明一个 function 是异步的，异步函数也就意味着该函数的执行不会阻塞后面代码的执行。
async返回的是promise实例，默认的是成功的状态
async返回的是promise实例，如果代码中有return <非promise>语句，JavaScript会自动把返回的这个value值包装成promise的resolved值。
async function timeout() {
return 'hello world'
}
console.log(timeout());
console.log('虽然在后面，但是我先执行');
await
下面这段话认真读 收获会很多
await只能在async函数里面使用
await后面可以放任何表达式，不过我们更多的是放一个返回promise对象的表达式。
认真读完上面最后这段话，非常有助于理解await对代码执行顺序的影响。
promise.all()
接收一个参数，它必须是可以迭代的，比如数组。
它通常用来处理一些并发的异步操作，即它们的结果互不干扰，但是又需要异步执行。它最终只有两种状态：成功或者失败。
指的是将数组中所有的任务执行完成之后， 才执行.then 中的任务
它的状态受参数内各个值的状态影响，即里面状态全部为fulfilled时，它才会变成fulfilled，否则变成rejected。
例如1：
const p1 = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(console.log('p1 任务1'))
},1000)
})
.then( data => {
console.log('p1 任务2')
})
.then( res => {
console.log('p1 任务3')
})
.catch( err =>{ throw err} )
const p2 = new Promise((resolve,reject)=>{
resolve(console.log('p2 任务1'))
}).then(
data => {
console.log('p2 任务2')
}
).catch(
err => {
throw err
}
)
//只有在p1,p2都执行完后才会执行then里的内容
Promise.all([p1,p2])
.then(()=>console.log('done'))
例如2
下面这个是我工作中遇到的使用实例（具体业务逻辑隐去）
// 保存按钮
handleSearcha(val) {
//表单验证
Promise.all([
this.$refs.ruleForm1.validate(),
this.$refs.ruleForm2.validate(),
this.$refs.ruleForm3.validate(),
this.$refs.ruleForm4.validate(),
]) //所有的表单验证成功后才会执行then里面的内容
.then(() => {
//这里面写表单验证成功后想要执行的业务逻辑，比如发请求
})
.catch(() => {
//只要有一个表单验证不成功，都会执行catch里的内容
this.$message.warning('请输入必填项');
});
},
例如3 工作实例
mounted() {
Promise.all([
this.xyle(),
this.lyh(),
this.gyt(),
//上述接口请求全部成功后执行then里面的内容
]).then((res) => {
console.log(res);
this.getInfo(); //此处也是请求接口
});
},
、
