Promise是什么？Promise怎么使用？回调地狱[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

1、Promise的概念

Promise是ES6提供的原生的类（构造函数）， 用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作）

2、Promise的两个特点：

1）、对象的状态不受外界影响。

Promise 有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。

2）、一旦状态改变，就不会再变

状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected

3、Promise的作用

解决回调地狱的问题。

回调地狱的代码（使用setTimeout）：

function fn1(cb){
    console.log("fn1开始");
    setTimeout(function(){
        console.log("fn1的异步操作");
        cb();
    },1000);
    console.log("fn1结束");    
}
​
function fn2(cb){
    console.log("fn2开始");
    setTimeout(function(){
        console.log("fn2的异步操作");
        cb();
    },1000);
    console.log("fn2结束");    
}
function fn3(cb){
    console.log("fn3开始");
    setTimeout(function(){
        console.log("fn3的异步操作");
        cb();
    },1000);
    console.log("fn3结束");    
}
​
​
function fn4(){
    console.log("fn4开始");
    console.log("fn4结束");    
}
​
// 把fn1 里的代码全部(包括异步操作)执行完毕后，执行fn2，fn2的异步操作执行完毕，再执行fn3；
fn1(function(){
    fn2(function(){
        fn3(fn4);
    })
});
​

Promise 对象可以将异步操作以同步操作的流程表达出来（使用链式的写法），避免了层层嵌套的回调函数。

如：函数fn1和fn2，当我们需要在fn1(fn1函数里有异步操作)调用结束后调用fn2，一般的解决方案是fn1（fn2）。而promise的做法是 fn1().then(fn2);即Promise将回调模式的主从关系调换了一个位置，变成了同等的只是顺序的关系

fn1().then(fn2).then(fn3).then(fn4)

4、Promise类的方法

console.dir(Promise)查看一下。

1、promise构造函数的参数是个函数 2、该函数（Promise的参数）的参数有两个：resolve，reject resolve 表示异步操作成功时，要调用的函数。是then函数的第一个参数 reject 表示异步操作失败时，要调用的函数。是then函数的第二个参数

new Promise(function(resolve, reject){
    
    
    // 异步操作的代码
​
    // 如果异步操作成功，调用resolve；如果失败，调用reject；
    
});

1）、 对象方法：then、catch

then方法：

功能：把then方法的参数传给resolve和reject。 promise对象.then(resolve回调函数,reject回调函数);

参数：

then方法的第一个参数是resolve

then方法的第二个参数是reject。

返回值：promise对象本身，所以，then调用完毕后，还可以继续调用then（即：链式调用）

then方法的基本使用：

let p1 = new Promise(function(resolve,reject){
    resolve();
    reject();
});
​
​
p1.then(function(){
    console.log("then方法的第一个参数");
},function(){
    console.log("then方法的第二个参数");
});

带上异步操作

function fn(){
    var p = new Promise(function(resolve, reject){
        
        //做一些异步操作
        setTimeout(function(){
            console.log(‘异步执行完成');
             resolve(‘姥姥的话就是你长大听不到的那些话');//这是then函数的参数；
        }, 2000);
        
    });
    return p;
}
​
fn().then((str)=>{
    console.log(str);
},()=>{})
​

catch方法：

它和then的第二个参数一样，用来指定reject的回调，

function fn(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log(‘异步执行完成');
             resolve(‘姥姥的话就是你长大听不到的那些话');//这是then函数的参数；
        }, 2000);
    });
    return p;
}
​
fn()
.then(()=>{})
.catch(()=>{})

Promise中then方法的数据传递

上一个then的返回值（结果）是下一个then的参数（输入）

function fn1(){
    console.log("fn1开始");
    let p = new Promise(function(resolve,reject){
        setTimeout(function(){            
            console.log("fn1的异步操作");
            resolve(3)
        },1000);
    });
    console.log("fn1结束");  
    return p;
}
​
​
fn1().then(function(num){
    console.log("第一次",num);//3
    return num+1;
}).then(function(num){
    console.log("第二次",num);//4
    return num+1;
}).then(function(num){
    console.log("第三次",num);//5
    return num+1;
});
​

2）、类方法： all , race

all方法：

功能： Promise.all可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据。返回的数据与传的参数数组的顺序是一样的。当所有的异步操作都成功才表示成功 。

参数：数组。数组里是若干个返回promise对象的函数（异步操作）；

返回值：promise对象。promise对象的then方法的回调函数的参数是 所有promise对象的resolve的参数（数组形式）。

//示例一：
function fn1(num){
    console.log("fn1开始",num);
    let p = new Promise(function(resolve,reject){
        setTimeout(function(){            
            console.log("fn1的异步操作",num);
            resolve("fn1异步的结果:"+num)
        },1000);
    });
    console.log("fn1结束",num);    
    return p;
}
​
​
Promise.all([fn1(1),fn1(2)]).then(function(result){
    // 这个函数要执行，必须保证，fn1(1)和fn1(2)都成功，才调用。
    // 参数result是数组，保存着多次异步操作的结果，也就是把多个异步操作中resolve函数的参数放到了result里
    console.log("result",result);
});
​
​
示例二：
​
function fn1(){
    console.log("fn1开始");
    let p = new Promise(function(resolve,reject){
        setTimeout(function(){            
            console.log("fn1的异步操作");
            resolve("fn1异步的结果")
        },1000);
    });
    console.log("fn1结束");    
    return p;
}
​
​
function fn2(str){
    console.log("fn2开始");
    let p = new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log("fn2的异步操作");
            resolve("fn2异步的结果");
        },3000);
    });    
    console.log("fn2结束");    
    return p;
}
​
Promise.all([fn1(),fn2()]).then(function(result){
    console.log("result",result); //["fn1异步的结果","fn2异步的结果"]
});
​

用Promise.all来执行，all接收一个数组参数，两个异步操作是并行执行的，等到它们都执行完后才会进到then里面。而两个异步操作返回的数据都在then里面，all会把所有异步操作的结果放进一个数组中传给then，就是上面的results

race方法：

功能：也是并发，但是，与all不同之处时，当一个异步操作完成（resolve或reject）时，就调用方法了。即：多个异步操作，同时执行，谁快就用谁的结果，所以，结果不再是数组。

function fn1(){
    console.log("fn1开始");
    let p = new Promise(function(resolve,reject){
        setTimeout(function(){            
            console.log("fn1的异步操作");
            resolve("fn1异步的结果")
        },1000);
    });
    console.log("fn1结束");    
    return p;
}
​
​
function fn2(str){
    console.log("fn2开始");
    let p = new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log("fn2的异步操作");
            resolve("fn2异步的结果");
        },3000);
    });    
    console.log("fn2结束");    
    return p;
}
​
Promise.race([fn1(),fn2()]).then(function(result){
    console.log("result",result); //"fn1异步的结果"
});

总结Promise的使用步骤

1、找到（曾经的）异步操作的代码，放在Prmoise构造函数的参数（函数）里 2、参数（函数）的第一个参数resolve是成功时调用的函数，对应then方法（函数）的第一个参数 3、参数（函数）的第二个参数reject是失败时调用的函数，对应then方法（函数）的第二个参数

5、 Promise封装AJAX

​
function ajaxUsePromise(obj){
     let p = new Promise(function(resolve,reject){
        let defaultObj = {
            url:"#",
            method:"get",
            params:"",
            isAsync:true
        }
​
        for(let key in defaultObj){
            if(obj[key]!=undefined){
                defaultObj[key] = obj[key];
            }
        }
​
        let xhr =new XMLHttpRequest();
​
        let urlAndParams = defaultObj.url;
​
        if(defaultObj.method.toLowerCase()=="get"){
            urlAndParams += "?"+ defaultObj.params;
        }
​
        xhr.open(defaultObj.method,urlAndParams,defaultObj.isAsync);    
       
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        resolve&&resolve(xhr.responseText);
                    }else{
                        reject&&reject("服务器出错了");
                    }
                }
            }  
        });
​
        if(defaultObj.method.toLowerCase()=="post"){
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(defaultObj.params);
        }else{
            xhr.send();
        }
​
        return p;
}