ES6之Promise对象

创建Promise对象

function getHtml(url) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onload = () => {
            resolve(xhr.responseText);
        };
        xhr.onerror = () => {
            reject(xhr.statusText)
        };
        xhr.send();
        }
    );
}
function getTitle(html){
    return html.substring(html.indexOf('<title>')+7,html.indexOf('</title>'));
}

执行单个Promise

getHtml('http://www.baidu.com')
.then(
    data => {
        console.log('[请求成功]' , getTitle(data));
    }, 
    status => {
        console.log('[请求失败]', status);
    }
).catch(e => {
    console.log('[异常]', e);
});

Safari运行效果 ( 停用跨域限制 )

执行多个Promise

Promise.all([
    getHtml('http://www.baidu.com'),
    getHtml('http://www.sogou.com'),
    Promise.resolve('Yahoo')
])
.then(
    datas => {
        console.log('[请求成功]', getTitle(datas[0]));
        console.log('[请求成功]', getTitle(datas[1]));
        console.log('[请求成功]', datas[2]);
    },
    status => {
        console.log('[请求失败]', status);
    }
).catch(e => {
    console.log('[异常]', e);
});

 Safari运行效果 ( 停用跨域限制 )

链式调用

在then方法的resolve/reject参数中返回Promise对象，实现Promise的链式调用。

getHtml('https://www.baidu.com')
.then(
    val=>{
        console.log(getTitle(val));
        return getHtml('https://www.sogou.com'); // 返回Promise对象
    }
).then(
    val=>{
        console.log(getTitle(val));
        return getHtml('https://www.sina.com'); // 返回Promise对象
    }
).then(
    val=>{
        console.log(getTitle(val));
    }
).catch(
    err=>{
        console.log(err);
    }
);

 

Safari运行效果 ( 停用跨域限制 )