ES6 Promise 对象简单了解

一、Promise 介绍

1.Promise：是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

2.ES6 之前非常多层次嵌套的同步、异步，执行顺序混乱且不好维护，Promise 就很好的解决了这些问题；

二、Promise 创建

要想创建一个 promise 对象、可以使用 new 来调用 Promise 的构造器来进行实例化。

const promise = new Promise((resolve, reject) => {
    //一顿异步操作之后
    if (false) {
        //console.log('异步成功！');
        resolve('异步成功！');
    } else {
        //console.log(('异步失败！'));
        reject('异步失败！');
    }
});
//then 方法可执行 resolve 的回调函数 
//catch 方法可执行 reject 的回调函数
p.then((value) => {
    console.log(value);
}).catch((reason) => {
    console.log((reason));
});

注意：

Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。

对于已经实例化过的 promise 对象可以调用 promise.then() 方法，传递 resolve 和 reject 方法作为回调。

三、实例测试

我们做个模拟多层异步通信的实例测试，要异步多个内容，并按指定顺序执行；

先给出不进行 Promise 异步，看它执行的顺序

//模拟异步1
setTimeout(() => {
    console.log('异步1');
}, 3500);
//模拟异步2
setTimeout(() => {
    console.log('异步2');
}, 800);
//模拟异步3
setTimeout(() => {
    console.log('异步3');
}, 1500);

这里不管怎么调节，最终输出结果总是：2，3，1。而需求顺序要：1，2，3；

传统解决办法—回调

setTimeout(() => {
    console.log("1.异步");
    setTimeout(() => {
        console.log("2.异步");
        setTimeout(() => {
            console.log("3.异步");
        }, 3500)
    },800)
},1500)

将上面模拟异步通信，通过 Promise 进行改装；

let p1 = new Promise((resolve, reject) => {
    //模拟异步1
    setTimeout(() => {
        console.log('异步1');
        resolve('1.异步');
    }, 3500);
});
let p2 = new Promise((resolve, reject) => {
    //模拟异步2
    setTimeout(() => {
        console.log('异步2');
        resolve('2.异步');
    }, 800);
});
let p3 = new Promise((resolve, reject) => {
    //模拟异步3
    setTimeout(() => {
        console.log('异步3');
        resolve('3.异步');
    }, 1500);
});
p1.then(value => {
    console.log(value);
    //当 return 一个 Promise 对象的时候，后续的 then 中的 方法的第一个参数会作为 p2 的 resolve
    return p2;
}).then(value => {
    console.log(value);
    return p3;
}).then(value => {
    console.log(value);
});

最终按需求顺序输出1，2，3

四、Promise.all方法

Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

//var p = Promise.all([p1,p2,p3]);
let p1 = new Promise((resolve, reject) => {
    //模拟异步1
    setTimeout(() => {
        //console.log('异步1');
        resolve('1.异步');
    }, 3500);
});
let p2 = new Promise((resolve, reject) => {
    //模拟异步2
    setTimeout(() => {
        //console.log('异步2');
        resolve('2.异步');
    }, 800);
});
let p3 = new Promise((resolve, reject) => {
    //模拟异步3
    setTimeout(() => {
        //console.log('异步3');
        resolve('3.异步');
    }, 1500);
});
let p = Promise.all([p1, p2, p3]);
p.then(value => {
    console.log(value);
});
// ['1.异步', '2.异步', '3.异步']0: "1.异步"1: "2.异步"2: "3.异步"length: 3[[Prototype]]: Array(0)

五、Promise Ajax

function ajax(url) {
    return new Promise(function (resolve, reject) {
        const req = new XMLHttpRequest();
        req.open('GET', url, true);
        req.onload = function () {
            if (req.status === 200) {
                resolve(req.responseText);
            } else {
                reject(new Error(req.statusText));
            }
        };
        req.onerror = function () {
            reject(new Error(req.statusText));
        };
        req.send();
    });
}
const url = "https://jsonplaceholder.typicode.com/users";
ajax(url).then(value => document.write('返回的数据：' + value))
         .catch(error => document.write('错误：' + error))

ES6 Promise 对象简单了解

ES6 Promise 对象简单了解

相关文章