Vue中的Promise.all()

Promise是异步编程的一种解决方案

什么情况下会来处理异步事件?

1 > 一种很常见的场景就是网络请求

2 > 我们封装网络请求的函数,因为不能立即拿到结果,所以不能简单的像3+4=7一样直接返回结果

3 > 所以我们往往传入一个函数,在数据请求成功时,将数据从回调函数中拿出来

4 > 如果只是简单的网络请求,那么这种方案不会给我们带来很大的麻烦

5 > 但是,当网络请求非常复杂时,就会出现回调函数地狱(ajax相互嵌套)

总结:Promise就是解决上面的问题的.而且是优雅的解决

（一）Promise三种状态

开发有异步操作时,就可以给异步操作包装一个Promise,异步操作有三种状态:

1.pending:等待状态,比如正在进行网络请求,或者是定时任务

2.fulfill:满足状态,当我们主动回调resolve时,就处于该状态

3.reject:拒绝状态,当我们主动回调reject时,就处于该种状态,并且会回调.catch().

——Promise-Promise链式处理

<script>
new Promise((resolve,reject) => {
    setTimeout(()=>{
        resolve('sss');
    },1000);
}).then((data) =>{
    console.log(data);
    return new Promise(resolve => {
        resolve(data + "bbb");
    });
}).then(data =>{
    console.log(data)
});
</script>

（二）Promise的all函数

应用场景当两个异步请求需要同时过来才能完成一个功能,这是使用all函数比较合适。因为底层把结果迭代到一个一个数组中了,所以我们最后调用.then()方法时,判断就非常的方便,而且代码非常简洁,利于维护。

<script>
let taskA = Promise.resolve()
let taskB = Promise.resolve()
taskA = new Promise((resolve,reject) => {
        const result = 1000;
        resolve(result)
    });
taskB = new Promise((resolve,reject) => {
        const result = 2000;
        resolve(result)
    });

Promise.all([taskA , taskB ]).then(result =>{
    console.log(result[0]);
    console.log(result[1])
});
</script>