promise 用法

理解

promise是解决异步处理回调问题

Promise对象状态

pending: 初始状态，不是成功或失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。

用法

const p = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            const time = Date.now();
            if(time % 2 ==1){
                resolve(' 奇数：' + time);
            }else{
                reject('不是奇数: ' + time);
            }
        },2000);
        console.log('promise 执行器已运行');
    });

    p.then(
        value => {
            console.log('成功：' + value);
        },
        reason => {
            console.log('失败：' + reason);
        }
    );
    console.log('then 已运行');

链式调用

new Promise((resolve,reject)=>{
        setTimeout(()=>{
            const time = Date.now();
            if(time % 2 ==1){
                resolve(' 奇数：' + time);
            }else{
                reject('不是奇数: ' + time);
            }
        },100);
        console.log('promise 执行器已运行');
    }).then(
        value => {
            console.log('成功：' + value);
        }
    ).catch(
        reason => {
            console.log('失败：' + reason);
        }
    );

romise.all()方法

const p1 = new Promise((resolve, reject) => {
        resolve(1);
    });
    const p2 = Promise.resolve(2);
    const p3 = Promise.reject(3);

    //所有p 成功才成功
    const pAll = Promise.all([p1,p2]);
    pAll.then(
        values => {
            console.log('success: '+ values);
        },
        reason => {
            console.log('fail:' + reason);
        }
    );

    const pAll2 = Promise.all([p1,p2,p3]);
    pAll2.then(
        values => {
            console.log('success: '+ values);
        },
        reason => {
            console.log('fail:' + reason);
        }
    );

Promise.race()方法

const p1 = new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve(1);
        },1000)

    });
    const p2 = Promise.resolve(2);
    const p3 = Promise.reject(3);

    const pRace = Promise.race([p1, p2]);
    pRace.then(value => {
        console.log('成功：' + value);
    }, reason => {
        console.log('失败：' + reason)
    });

    const pRace2 = Promise.race([p1, p2, p3]);
    pRace2.then(value => {
        console.log('成功：' + value);
    }, reason => {
        console.log('失败：' + reason)
    });

promise 封装Ajax

    function ajax(URL) {
        return new Promise(function (resolve, reject) {
            const req = new XMLHttpRequest();
            req.open('GET', URL, true);
            req.onload = function () {
                if (req.status === 200) {
                    resolve(req.responseText);
                } else {
                    reject(new Error(req.statusText));
                }
            };
            req.onerror = function () {
                reject(new Error(req.statusText));
            };
            req.send();
        });
    }
    let URL = "https://api.github.com/users";
    ajax(URL).then(function onFulfilled(value){
        document.write('内容是：' + value);
    }).catch(function onRejected(error){
        document.write('错误：' + error);
    });