// 使用promise的方式實現(xiàn)ajax

function ajax(url) {
    return new Promise(function(resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.open('Get'); // 定義請求方式
        xhr.responseType = 'json'; // 定義返回值類型
        xhr.onload = function() {
            if(this.status === 200) {
                resolve(this.response);
            } else {
                reject(new Error(this.statusText));
            }
        }
        xhr.send();
    })
}

ajax('/api/users.json').then(function(value) {
    console.log(value);
}, function(error) {
    console.log(error);
})

// 總結(jié)

// 1、promise對象的then方法會返回一個全新的promise對象
// 2、后面的then方法就是為上一個then方法返回的promise對象注冊回調(diào)
// 3、前面then方法中回調(diào)函數(shù)返回值作為下一個then方法中回調(diào)函數(shù)參數(shù)
// 4、如果回調(diào)函數(shù)返回一個新的promise，那后面then方法的回調(diào)會等待它的結(jié)束

// rejected為promise中執(zhí)行異?；蚴謩訏伋鲥e誤或執(zhí)行失敗提供回調(diào)處理
// 也可以用promise對象的catch方法來替代rejected回調(diào)，效果一樣，如下
ajax('/api/users.json')
.then(function(value) {
    console.log(value);
})
.catch(function(error) {  // 等價于then(undefined, function(error) {console.log(error)})
    console.log(error);
})

/**
 * 注冊rejected回調(diào)和catch的區(qū)別是：
 * rejected只能捕獲單獨的某一個Promise對象執(zhí)行時的異常
 * 而ctach則能捕獲所有異常，異常會層層傳遞直至被捕獲
 * 如下：
*/

ajax('/api/xxx.json')
.then(function(value) {
    console.log(value);
    return ajax('api/yyy.json');
}, function rejected(error) { // 他能捕獲調(diào)用ajax('/api/xxx.json')時的異常，但不能捕獲ajax('api/yyy.json')調(diào)用時的異常，而catch可以
    console.log(error);
})
.catch(function(error) {  // 更像是給整個promise鏈條注冊的失敗回調(diào)，建議都是用這種情況，更方便，也更符合鏈式調(diào)用特性
    console.log(error);
})

// 還有一種就是在全局注冊一個捕獲未處理異常的事件，unhandledRejection，但不建議這么做
// js運行環(huán)境寫法
window.addEventListener('unhandledrejection', event => {
    const { reason, promise } = event;
    // reason => promise發(fā)生錯誤的原因，一般是一個Error對象
    // promise => 發(fā)生異常的promise對象
    event.preventDefault();
}, false)
// node環(huán)境寫法
process.on('unhandledRejection', (reason, promise) => {
    // reason => promise發(fā)生錯誤的原因，一般是一個Error對象
    // promise => 發(fā)生異常的promise對象
});