Promise基本用法

Promise是es6中解决回调地狱一种同步优雅写法。promise.then作为微任务队列中的一种异步,优先级高于宏任务。promise有三种状态:pending,resovle和reject,状态总是由pending向resolve和reject转换。下面来讲述几个基本用法。

1.promise.then、promise.resovle、promise.reject


function PromiseDemo(){

    new Promise((resolve, reject) =>{

        resolve({data:['linjian is test']});

    }).then((value)=>{

        console.log(value);

    })

    Promise.resolve({data:'这是异步'}).then((value)=>{

        console.log('resolve异步', value)

    });

    Promise.reject({data:'这是reject异步'}).then((value) =>{

        console.log('reject异步', value)

    })

}

PromiseDemo();

输出结果

{ data: [ 'linjian is test' ] }

resolve异步 { data: '这是异步' }

(node:6940) UnhandledPromiseRejectionWarning: #<Object>

(node:6940) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)

(node:6940) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

这是几种最基本异步,上面我们发现reject中必须添加catch捕捉异常,所以最后修改如下:


Promise.reject({data:'这是reject异步'}).then((value) =>{

        console.log('reject异步', value)

    }).catch((e)=>{

        console.log('e:', e)

    })

输出: e: { data: '这是reject异步' }

下面讲述Promise.all和Promise.race用法

1.Promise.all很明显就是等待所有的Promise完成后才返回结果,这种在我们异步请求几个API时,要等待所有结果返回后再处理非常有用。

const p1 = new Promise((resolve, reject) => {

        setTimeout(() =>{

            resolve({data:'这个promise1'})

        }, 5000);

    })

    const p2 = new Promise((resolve, reject) => {

        setTimeout(() =>{

            resolve({data:'这个promise2'})

        }, 1000);

    })

    Promise.all([p1,p2]).then((value) =>{

        console.log('Promise.all', value)

    })

输出:Promise.all [ { data: '这个promise1' }, { data: '这个promise2' } ]

这里我们看到Promise.all把所有结果一次性返回,而且返回的顺序跟all入参数组一样,不管执行时间的长短顺序。


Promise.race([p1, p2]).then((value)=>{

        console.log('Promise.race:', value);

    })

输出结果:Promise.race: { data: '这个promise2' }

Promise.race是谁快返回谁。

如果Promise.all中某个promise发生异常,可以通过主动reject和catch的方式,保证所有的promise返回结果。


const p1 = new Promise((resolve, reject) => {

        setTimeout(() =>{

            resolve({data:'这个promise1'})

        }, 5000);

    }).catch((value)=>{

        return '这是catch1说明'

    })

    const p2 = new Promise((resolve, reject) => {

        setTimeout(() =>{

            reject({data:'这个promise2'})

        }, 1000);

    }).catch((value)=>{

        return '这是catch2说明'

    })

    Promise.all([p1,p2]).then((value) =>{

        console.log('Promise.all', value)

    })

输出结果:

Promise.all [ { data: '这个promise1' }, '这是catch2说明' ]

promise串联,可以同时建立多个promise,在then阶段取数的时候,可以有序的取数。

console.log('promise 链式调用')
    const p3 = () => new Promise((resolve, reject) => {
            resolve({data: 'china'})
        })
    const p4 = (data) => {
        console.log(data)
        return new Promise((resolve, reject) => {
            resolve({data: 'guangdong'})
        })
    }
    const p5 = (data) => {
        console.log(data)
        return new Promise((resolve, reject) => {
            resolve({data: 'shenzhen'})
        })
    }
    p3().then(p4).then(p5).then((data) => {
        console.log(data)
    })
输出结果:
promise 链式调用
{ data: 'china' }
{ data: 'guangdong' }
{ data: 'shenzhen' }

这里要注意是链式调用,上一个结果会成为下一个promise的入参,所以要在下一个promise中取结果。
上面这种例子有个问题,如果是遇到有reject操作,会直接抛出异常,终止后续promise的执行,例子如下:


    console.log('promise 链式调用')
    const p3 = () => new Promise((resolve, reject) => {
        resolve({data: 'china'})
    })
    const p4 = (data) => {
        console.log(data)
        return new Promise((resolve, reject) => {
            resolve({data: 'guangdong'})
        })
    }
    const p5 = (data) => {
        console.log(data)
        return new Promise((resolve, reject) => {
            resolve({data: 'shenzhen'})
        })
    } 
    const p6 = (data) => {
        console.log(data);
        return new Promise((resolve, reject) => {
            reject('这是错误结果');
        })
    }
    p3().then(p6).then(p4).then(p5).then((data) => {
        console.log(data)
    }).catch((value) => {
        console.log('捕捉异常', value)
    })
输出结果:
promise 链式调用
{ data: 'china' }
捕捉异常 这是错误结果

我们可以通过内部捕捉异常,防止整条链子都终止执行

    const p6 = (data) => {
        console.log(data);
        return new Promise((resolve, reject) => {
            reject('这是错误结果');
        }).catch((value) => {
            console.log('内部捕捉异常', value)
        })
    }
执行结果:
promise 链式调用
{ data: 'china' }
内部捕捉异常 这是错误结果
undefined
{ data: 'guangdong' }
{ data: 'shenzhen' }

所以内部捕捉异常之后,就不会把异常抛到外部链式promise上,就不会影响到整个链子的执行了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,811评论 1 56
  • 含义 Promise是异步编程的一种解决方案,用于一个异步操作的最终完成(或失败)及其结果值的表示,比传统的回调函...
    nimw阅读 27,304评论 0 4
  • 原文地址:http://es6.ruanyifeng.com/#docs/promise Promise 的含义 ...
    AI云栈阅读 954评论 0 7
  • ## promise概述 - 基本语句 resolve,reject,then,catch - 三种状态:pend...
    kevin元阅读 388评论 0 0
  • 我觉得我现在该放下许多执念,给自己放个假,给心放个假。一切以赚钱为中心,围绕两个孩子和自己转。以看书学习为休息调节...
    葭溪阅读 143评论 0 1

友情链接更多精彩内容