Vue中的异步编程Promise

参考：https://www.cnblogs.com/Yan3399/p/14971702.html

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

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

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

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

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

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

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

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

2、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)
});

3、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>

4、使用场景

• 调用API数据需要先后顺序，使用Promise.all 来等待多个异步操作完成。

created() {
        Promise.all([
            this.fetchConfig(),
            this.fetchLogistics(),
        ]).then(() => this.search());
    },

• Vue.js 生命周期钩子方法 created在这个方法中，使用了 Promise.all 来等待多个异步操作完成，然后调用 this.search() 方法。