vue eight day

Promise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // promise 处理异步任务
        // 1.可以避免多层异步调用
        // 2.Promise对象提供了简介的api，使得控制异步操作更加容易
        var p=new Promise(function(resolve,reject){
            // 成功时调用resolv
            resolve("正常");
            // 失败时调用reject
            reject("失败");
        })
        p.then(function(data){
            // 从resolv得到的正常结果
            console.log(data)
        },function(info){
            // 从reject得到的错误信息
            console.log(info)
        })
    </script>
    
</body>
</html>

和ajax配合使用

<script>
// ===================================================
        // 怎么和ajax配合
        // 就是封装一个方法 里面去ajax 然后用promise处理结果
        // 然后用then来处理数据
        // 如果需要嵌套调用ajax 就可以一直调用那个方法 then也可以一直嵌套使用
        // 见下面伪代码
        // 1.先封装一个调用接口伪代码
        function querydata(url){
            return new Promise(function(resolve,reject){
                $.ajax(url,function(data){
                    if("正常"){
                        resolve(data)
                    }else{
                        reject("服务器出错")
                    }
                })
            })
        }
        // 2.在第一个then里可以继续嵌套调用ajx封装函数 然后继续then处理结果
        // 其实还是在疯狂嵌套回调，只是比jquery代码可读性高一点
        // 3.如果最后return不是promeis对象，只是普通的数据，then会默认return一个promeis对象
        querydata("url")
        .then(function(data){
            return querydata("url2")
        })
        .then(function(data){
            return querydata("url3")
        })
        .then(function(data){
            console.log(data)
        })
    </script>

Promeis其他实例常用方法

promeis.then() 处理正常结果

promeis.catch() 处理异常数据主要用于接收reject的数据

promeis.finall() 无论是否正常都会调用

        // ===================================================================
        // 其他常用api写法
        querydata("url")
        .then(function(data){
            console.log(data)
        })
        .catch(function(){
            console.log(data)
        })
        .finally(function(data){
            console.log(data)
        })

Promeis其他对象常用方法

        // ====================================================================
        // 对象方法
        // all() 一起调用异步 需要所有得到结果后才完成
        var p1=querydata("url")
        var p2=querydata("url")
        var p3=querydata("url")
        Promise.all([p1,p2,p3]).then(function(result){
            console.log(reuslt) // result 是一个数组
        })
        // race() 一起调用异步 得到一个结果后就完成 其他得异步还是会进行 但是不关心结果
        Promise.race([p1,p2,p3]).then(function(result){
            console.log(result) // result 是一个单数据
        })