promise详解

promise

Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法

对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
一旦状态改变，就不会再变：Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected

为了解决ajax的回调地狱问题

回调地狱 

存在异步任务的代码，不能保证能按照顺序执行，那如果我们非要代码顺序执行呢？正常的方式是添加回调

$.ajax({
            url: 'http://192.168.XX.XXX:9999/path1', //接口地址
            method: 'get',  //请求方式
            data:{
                username: 'wang',
                password: 'abcd'
            },
            dataType: 'json',
            timeout: 5000,  //超时事件
            // 回调函数
            success: function(res){
                callback(res)
            },
            error: function(err){
                console.log('请求出错',err)
            }
        })


function callback(res){

    setTimeout(function () {  //第一层
            console.log('111');
            setTimeout(function () {  //第二程
                console.log('222');
                setTimeout(function () {   //第三层
                    console.log('333');
                }, 1000)
            }, 2000)
        }, 3000)

}

解决回调地狱问题

promise解决

        function fn(str){
            var p=new Promise(function(resolve,reject){
                //处理异步任务
                var flag=true;
                setTimeout(function(){
                    if(flag){
                        resolve(str)
                    }
                    else{
                        reject('操作失败')
                    }
                })
            })
            return p;
        }

        fn('111')
        .then((data)=>{
            console.log(data);
            return fn('222');
        })
        .then((data)=>{
            console.log(data);
            return fn('333')
        })
        .then((data)=>{
            console.log(data);
        })
        .catch((data)=>{
            console.log(data);
        })

async/await

我们看async关键字，他作为一个关键字放到声明函数前面，表示该函数为一个异步任务，不会阻塞后面函数的执行

        async function fn(){
            return '111';
        }
        console.log(fn());

async自动封装一个promise对象

和Promise对象一样，处理异步任务时也可以按照成功和失败来返回不同的数据，处理成功时用then方法来接收，失败时用catch方法来接收数据

        async function fn() {
            var flag = true;
            if (flag) {
                return '1111';
            }
            else{
                throw '处理失败'
            }
        }
        fn()
        .then(data=>{
            console.log(data);
        })
        .catch(data=>{
            console.log(data);
        })

        console.log('先执行我，表明async声明的函数是异步的');

await关键字

• await关键字只能在使用async定义的函数中使用
• ​await后面可以直接跟一个 Promise实例对象
• await可以直接拿到Promise中resolve中的数据

        //封装一个返回promise的异步任务
        function fn(str) {
            var p = new Promise(function (resolve, reject) {
                var flag = true;
                setTimeout(function () {
                    if (flag) {
                        resolve(str)
                    } else {
                        reject('处理失败')
                    }
                })
            })
            return p;
        }

        //封装一个执行上述异步任务的async函数
        async function test(){
            var res1=await fn('111');  //await直接拿到fn()返回的promise的数据，并且赋值给res
            var res2=await fn('222');
            var res3=await fn('333');
            console.log(res1,res2,res3);
        }
        //执行函数
        test();

await会一直等待同步等待async的结果，类似java中的future.get()或者Netty中的sync方法，都表示类似的含义，同步等待异步操作的结果