ES6语法—Promise详解

  1. 一、Promise概述
  2. 二、Promise.all
  3. 三、Promise.race
  4. 四、Promise优点:
  5. 五、Promise缺点:
  6. 六、同步还是异步:

一、Promise概述

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

  • Promise 有三种状态:等待(Pending)、已完成也称执行了(Resolved、fullfilled)和拒绝(Rejected),状态的改变只能是单向的,且变化后不可在改变。

  • Promisethen 方法中的第一个参数,是状态由 pending 变为 resolved 后会调用的回调函数;then 方法中的第二个参数,是状态由 pending 变为 rejected 后调用的回调函数;

  • Promisecatch 方法用于指定发生错误时的回调函数。

  • Promise 支持链式调用

  • Promise 成功时的调用 resolve,失败时的调用 reject

function fn(){
    return new Promise((resolve, reject)=>{
        成功时调用 resolve(数据)
        失败时调用 reject(错误)
    })
}
fn().then(success1, fail1).then(success2, fail2)

二、Promise.all

  • Promise.all() 方法将多个 Promise 实例,包装成一个新的 Promise 实例。
// promise1和promise2都成功才会调用success1
Promise.all([promise1, promise2]).then(success1, fail1)

三、Promise.race

  • Promise.race() 方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。
// promise1和promise2只要有一个成功就会调用success1
Promise.race([promise1, promise2]).then(success1, fail1)

四、Promise优点:

可以解决回调地狱问题,让回调函数变成了规范的链式写法。

function china() {
    console.log('china中国')
    var p = new Promise(
        function (resolve, reject) {
            console.log('中国  国家')
            resolve('教育大省份')
        }
    )
    return p;
}

function jiangshu(data) {
    console.log('江苏' + data);
    var p = new Promise(function (resolve, reject) {
        console.log('江苏 省份')
        resolve('地级市');
    })
    return p;
}

function xian(data) {
    console.log('盱眙县' + data)
    var p = new Promise(function (resolve, reject) {
        console.log('盱眙县');
        resolve('淮河镇')
    })
    return p;
}

china()
    .then(function (data) { return jiangshu(data) })
    .then(function (data) { return xian(data) })
    .then(function (data) { console.log(data) })

五、Promise缺点:

无法取消 Promise,一旦新建它就会立即执行,无法中途取消。
如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。
当处于 Pending 状态时,无法得知目前进展到哪一个阶段。


六、同步还是异步:

promise 构造函数是同步执行的,then 方法是异步执行的。

const promise = new Promise((resolve, reject) => {
    console.log(1);
    resolve(5);
    console.log(2);
}).then(val => {
    console.log(val);
});

promise.then(() => {
    console.log(3);
});

console.log(4);

setTimeout(function() {
    console.log(6);
});

// 1  2  4  5  3  6
  • Promise new 的时候会立即执行里面的代码, then 是微任务 会在本次任务执行完的时候执行 setTimeout 是宏任务 会在下次任务执行的时候执行。

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:ES6语法—Promise详解

文章字数:660

本文作者:Spicy boy

发布时间:2019-06-25, 10:46:07

最后更新:2021-03-30, 15:41:32

原始链接:http://www.spicyboy.cn/2019/06/25/ES6%E8%AF%AD%E6%B3%95%E2%80%94Promise%E8%AF%A6%E8%A7%A3/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏