Promise 基础与使用套路

Promise 是 ES6 中内置支持的对象

其构造函数接受一个参数, 该参数是一个函数, 该函数有两个参数, 两个参数都是函数, 一个在成功时调用(resolve), 一个在出错时调用(reject)

let myPromise = new Promise(
    function(resolve, reject){
        if (成功){
            resolve(数据 或 另一个 Promise);
        }else{
            reject(出错信息)
        }
    }
);

reject 的参数是错误信息, 如网络异常, 或用户逻辑错误信息

resolve 的参数一般是处理(如网络访问)后的数据, 也可以是另一个 Promise

then 方法
Promise 的对象(如 myPromise) 可以调用 then 方法, then 方法接受两个参数, 一个是成功时的回调, 一个是出错时的回调

function resolved(数据){
};
function rejected(错误信息){
};
myPromise.then(resolved, rejected)

注意: 千万不要误解是 Promise的参数函数中直接调用的 resolved 和 rejected, Promise的参数函数中的 resolve 方法和 reject 方法是 Javascript引擎实现的, 它们的作用是修改当前 Promise 的状态从等待到成功完成或是从等待到出错完成.
而 then 方法做的是设置一个 callback, 该 callback 会在 Promise 状态改变时调用 then方法中给定的 resolved 或 rejected 参数函数

简单的例子

let promise = new Promise(function(resolve, reject){
    resolve("hello world");
});

promise.then(function(data){
    console.log(data);
})

输出:
hello world

复杂点的网络异步的例子

function fetchData(url){
    const promise = new Promise(function(resolve, reject){
        // 构造 一个 ajax 请求
        const client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = function(){
            if (this.readyState != 4) { return; }
            if (this.status == 200){
                // 当网络请求成功时调用 resolve 方法, 并传入获取的数据
                resolve(this.response);
            }else{
                reject(new Error(this.statusText));
            }
        };;
        client.responseType = "json";
        client.setRequestHeader("Accept", "application/json");
        client.send();
    });
    return promise;
}

fetchData("data1.json").then(
    function(data){
        console.log(data);
    }   
)

上面then方法给定的 resolved 函数只是简单的打印了获得的数据

Javascript 引擎提供的 resolve 方法可以接受两种类型的参数
第一种参数是除了Promise对象之外的普通对象, 这时 resolve 方法会修改当前 Promise的状态为成功完成, 并将这个普通对象作为处理的结果保存, 将来传递给 then 方法的参数函数 resolved 作为参数
第二种参数是Promise 对象, 当 resolve 方法发现参数是一个 Promise 时, 并不会更改当前 Promise的状态, 而是会跟踪参数Promise 的状态, 即不会立刻就导致 then 的 resolved 参数函数的触发, 而是会等参数Promise 的状态变化时才触发, 并且 then 的 resolved 函数的参数由这个新的 Promise 中的 resolve 方法给定

let p1 = new Promise(
    function(resolve, reject){
        resolve("hello");
    }
)

let p2 = new Promise(
    function(resolve, reject){
        // 注: 并不会 改变 当前 Promise 的状态, 需要等待 p1 的执行结论
        resolve(p1);
    }
);

p2.then(function(data){
    console.log(data);
})

输出:
hello

这种 resolve Promise 的特性开发人员似乎不会直接用到

另外 then 参数方法 resolved 是可以有返回值的, 因为 then 方法的返回值是一个新的 Promise, 因此可以链式调用
promise.then(function(data){})
.then(function(data){})
.then(function(data){})
.then(function(data){})
因此可以实现阶段性的异步调用, 如先访问一个 url, 根据获得的数据访问另一个 url
这时就可以利用 resolved 的方法的返回值

let p = new Promise(
    function(resolve, reject){
        resolve(1);
    }
);

p.then(function(data){
    console.log(data);
    return 2
}).then(function(data){
    console.log(data);
    return 3
}).then(function(data){
    console.log(data);
}).then(function(data){
    console.log(data);
})
输出:
1
2
3
undefined

当返回值是一个非 Promise 对象的普通值, 则 then 返回的 Promise 直接就是成功完成的状态, 它的 then 方法中的 resolve 方法会被调用, 参数就是这个普通值
当返回值是一个 Promise 对象, 则 then 方法返回的 Promise 对象会跟踪该 Promise 对象的状态, 直到这个 Promise 对象的状态改变, 进而触发 then 的 resolve 方法的调用

总结一下, then 方法返回的 Promise 的构造函数的参数函数其实是 resolve 了 then 方法的 resolved 参数函数的返回值, 这就是利用之前那个特性实现的

function fetchData(url){
    const promise = new Promise(function(resolve, reject){
        const handle = function(){
            if (this.readyState != 4) { return; }
            if (this.status == 200){
                resolve(this.response);
            }else{
                reject(new Error(this.statusText));
            }
        };
        const client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handle;
        client.responseType = "json";
        client.setRequestHeader("Accept", "application/json");
        client.send();
    });
    return promise;
}

fetchData("data1.json").then(
    function(data){
        // 第一把结果获得
        console.log(data);
        // 业务没有完成, 继续发起请求
        return fetchData(data.nextURL)
    }
).then(
    function(data){
        // 第二把结果返回
        console.log(data);
    }
)

Promise 基础 与 使用套路

猜你喜欢

Promise 基础与使用套路