JS中对Promise的理解与使用

JS中对Promise的理解与使用

1.Promise 它是什么

Promise 是一个类，可。。。

其实就是一种写异步代码的方式。。。。。。

2.Promise 干什么用

将异步代码的回调写法改为同步代码（此处只是写法改变，代码还是异步执行）

3.Promise 的三种状态

• pending => 等待
• rejected => 已拒绝
• fulfilled => 已执行

3.Promise 的用法

首先，我们需要了解 Promise 都有哪些内容：构造函数、对象的实例方法、静态方法

• 1个构造函数：new Promise
• 3个对象的实例方法：.then 和 .catch 和 finally（不常用）
• 4个静态方法：Promise.all、Promise.race和Promise.resolve、Promise.reject

//创建一个Promise的实例 ———— p对象
var p = new Promise();

传递一个回调函数作为 Promise 的参数，在这个回调函数里面发送异步请求。
回调函数中有两个参数：
resolve：是一个函数，执行的时候会把Promise实例的状态变为成功并且可以传递一个参数(只能传递一个)
reject：是一个函数，执行的时候会把Promise实例的状态变为失败并且可以传递一个参数(只能传递一个)

p实例对象的3个方法，then、catch、finally
then(successCallback, failedCallback) 接收两个参数，分别表示成功/失败时的回调函数。
successCallback 的参数是resolve() 传递的参数；failedCallback 的参数是reject() 传递的参数

好了，上代码，看看Promise的使用示例

var p = new Promise(function(resolve, reject) {
            QF.get("./a.php", {}, function(data) {
                if (!data.error) {
                    resolve(data);
                } else {
                    reject(data)
                }
            })
        });
        //监听成功执行的函数
        p.then(function(data) {
            console.log("chenggongcode....")         
        })
        //监听失败执行的函数
        .catch(function){
            console.log("shibaicode...")
        })

// 输出：chenggongcode....

那么如果连续多个Promise 呢？

function sendAjax1() {
            return new Promise((resolve, reject) => {
                QF.get("./a.php", {}, (data) => {
                    if (!data.error) {
                        resolve(data);
                    } else {
                        reject("第一个请求失败了");
                    }
                });
            });
        }
        function sendAjax2() {
            return new Promise((resolve, reject) => {
                QF.get("./b.php", {}, (data) => {
                    if (!data.error) {
                        resolve(data);
                    } else {
                        reject("第二个请求失败了");
                    }
                })
            });
        }

        function sendAjax3() {
            return new Promise((resolve, reject) => {
                QF.get("./c.php", {}, (data) => {
                    if (!data.error) {
                        resolve(data);
                    } else {
                        reject("第三个请求失败了");
                    }
                })
            })
        }
        console.log("第一个请求发送了")
        let p = sendAjax1();
        p.then(() => {
            console.log("第一个请求回来了")
            console.log("第二个请求发送了")
            return sendAjax2();
        })
        .then((data) => {
            console.log("第二个请求回来了")
            console.log("第三个请求发送了")
            return sendAjax3();
        })
        .then((data) => {
            console.log("第三个请求回来了")
        })
        // 统一处理前面每一个Promise实例失败的可能性 
        .catch(function (data) {
            console.log(data)
        })
        // 最后 不论成功还是失败 总会执行finally的函数
        .finally(function() {
            console.log("你好我是finally函数")
        })

php代码：

//a.php文件
<?php
    sleep(10);
    echo json_encode(array("error" => 0, "data" => "成功111111"));
?>

//b.php文件
<?php
    sleep(2);
    echo json_encode(array("error" => 1, "data" => "成功2"));
?>

look look执行结果



大概先到这了，日后继续完善