promise实现ajax

// 使用promise的方式实现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);
})

// 总结

// 1、promise对象的then方法会返回一个全新的promise对象
// 2、后面的then方法就是为上一个then方法返回的promise对象注册回调
// 3、前面then方法中回调函数返回值作为下一个then方法中回调函数参数
// 4、如果回调函数返回一个新的promise，那后面then方法的回调会等待它的结束

// rejected为promise中执行异常或手动抛出错误或执行失败提供回调处理
// 也可以用promise对象的catch方法来替代rejected回调，效果一样，如下
ajax('/api/users.json')
.then(function(value) {
    console.log(value);
})
.catch(function(error) {  // 等价于then(undefined, function(error) {console.log(error)})
    console.log(error);
})

/**
 * 注册rejected回调和catch的区别是：
 * rejected只能捕获单独的某一个Promise对象执行时的异常
 * 而ctach则能捕获所有异常，异常会层层传递直至被捕获
 * 如下：
*/

ajax('/api/xxx.json')
.then(function(value) {
    console.log(value);
    return ajax('api/yyy.json');
}, function rejected(error) { // 他能捕获调用ajax('/api/xxx.json')时的异常，但不能捕获ajax('api/yyy.json')调用时的异常，而catch可以
    console.log(error);
})
.catch(function(error) {  // 更像是给整个promise链条注册的失败回调，建议都是用这种情况，更方便，也更符合链式调用特性
    console.log(error);
})

// 还有一种就是在全局注册一个捕获未处理异常的事件，unhandledRejection，但不建议这么做
// js运行环境写法
window.addEventListener('unhandledrejection', event => {
    const { reason, promise } = event;
    // reason => promise发生错误的原因，一般是一个Error对象
    // promise => 发生异常的promise对象
    event.preventDefault();
}, false)
// node环境写法
process.on('unhandledRejection', (reason, promise) => {
    // reason => promise发生错误的原因，一般是一个Error对象
    // promise => 发生异常的promise对象
});