zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    autorelease的对象何时被释放
    如何处理webView跳转
    根据Url 获取图片尺寸 iOS
    iOS开发证书"此证书的签发者无效"解决方法
    IOS, xib和storyboard的混用
    友盟社交分享中的那些坑
    iOS手势(滑动)返回的实现(自定义返回按钮)
    关于tableview下拉刷新崩溃的问题
    dispatch_async 和dispatch_sync
    ios调用系统界面显示英文
  • 原文地址:https://www.cnblogs.com/Yan3399/p/14971702.html
Copyright © 2011-2022 走看看