JavaScript的Promise对象

回掉地狱：多次在内部递归调用外部函数的返回结果值。

Promise对象三种状态

• pending：等待中，或者进行中，表示还没有得到结果
• resolved：已经完成，可以继续执行
• rejected：得到非我所愿结果，拒绝执行
  在Promise对象的构造函数中，构造函数的第一个参数为函数，用来处理Promise的状态变化。

  new Promise(function(resolve, reject) {
      if(true) { resolve() }; // 对应resolved状态
      if(false) { reject() }; // 对应rejected状态
  })

Promise对象中的then方法

then方法接收构造函数中的处理的状态变化
then方法有2个参数，第一个参数接收resolve状态的执行，第二个参数接收reject状态的执行。

function fn(num) {
    return new Promise(function(resolve, reject) {
        if (typeof num == 'number') {
            resolve();
        } else {
            reject();
        }
    }).then(function() {
        console.log('参数是一个number值');
    }, function() {
        console.log('参数不是一个number值');
    })
}
fn('hahha');
fn(1234);

Promise的then的链式调用(解决回调地狱的一种方式)

function fn(num) {
    return new Promise(function(resolve, reject) {
        if (typeof num == 'number') {
            resolve();
        } else {
            reject();
        }
    })
    .then(function() {
        console.log('参数是一个number值');
    }).then(null, function() {
        console.log('参数不是一个number值');
    })
}
fn('hahha');
fn(1234);

Promise中的数据传递

var fn = function(num) {
    return new Promise(function(resolve, reject) {
        if (typeof num == 'number') {
            resolve(num);
        } else {
            reject('TypeError');
        }
    })
}
fn(2).then(function(num) {
    console.log('first: ' + num);
    return num + 1;
}).then(function(num) {
    console.log('second: ' + num);
    return num + 1;
}).then(function(num) {
    console.log('third: ' + num);
    return num + 1;
});
// 输出结果
first: 2  second: 3   third: 4

多次Ajax请求，后序请求调用前边请求的返回数据，使用Promise对象：

返回正确结果，resolve一下，错误结果reject一下
如reject(e),resolve(response),reject(new Error(XHR.statusText))

var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
// 封装一个get请求的方法
function getJSON(url) {
    return new Promise(function(resolve, reject) {
        var XHR = new XMLHttpRequest();
        XHR.open('GET', url, true);
        XHR.send();
        XHR.onreadystatechange = function() {
            if (XHR.readyState == 4) {
                if (XHR.status == 200) {
                    try {
                        var response = JSON.parse(XHR.responseText);
                        resolve(response);
                    } catch (e) {
                        reject(e);
                    }
                } else {
                    reject(new Error(XHR.statusText));
                }
            }
        }
    })
}
getJSON(url).then(resp => console.log(resp));

Promise.all

一个Ajax请求需要2个或者更多请求都有返回结果之后才能确定，用Promise.all，其中参数是以Promise对象组成的数组

var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var url1 = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-03-26/2017-06-10';
function renderAll() {
    return Promise.all([getJSON(url), getJSON(url1)]);
}
renderAll().then(function(value) {
    console.log(value);
})

只有当所有的Promise对象都变为resolved或者rejected的时候，才会调用then方法

Promise.race

与Promise.all相同，以Promise对象组成的数组作为参数，但是当Promise其中一个Promise状态变为resolved或者rejected，就可以调用.then方法

function renderRace() {
    return Promise.race([getJSON(url), getJSON(url1)]);
}
renderRace().then(function(value) {
    console.log(value);
})

参考文章：
Promise——这波能反杀
如有错误，烦请指正，谢谢！

赏

谢谢！

支付宝

微信