Vue Promise的基本使用

1.Promise单次请求接口

const promise = new Promise((resolve, reject) => {
    // 这里做异步任务（比如ajax 请求接口。这里暂时用定时器代替）
    setTimeout(function() {
        var data = { retCode: 0, msg: 'qianguyihao' }; // 接口返回的数据
        if (data.retCode == 0) {
            // 接口请求成功时调用
            resolve(data);
        } else {
            // 接口请求失败时调用
            reject({ retCode: -1, msg: 'network error' });
        }
    }, 100);
});
// 第二步：业务层的接口调用。这里的 data 就是 从 resolve 和 reject 传过来的，也就是从接口拿到的数据
promise.then(data => {
    // 从 resolve 获取正常结果
    console.log(data);
}).catch(data => {
    // 从 reject 获取异常结果
    console.log(data);
});

2.Promise.all()

/*
  封装 Promise 接口调用
*/
function queryData(url) {
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState != 4) return;
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 处理正常结果
                resolve(xhr.responseText);
            } else {
                // 处理异常结果
                reject('服务器错误');
            }
        };
        xhr.open('get', url);
        xhr.send(null);
    });
}
var promise1 = queryData('http://localhost:3000/p1');
var promise2 = queryData('http://localhost:3000/p2');
var promise3 = queryData('http://localhost:3000/p3');
Promise.all([promise1, promise2, promise3]).then(result => {
    console.log(result);
});