zoukankan      html  css  js  c++  java
  • Promise.then方法的执行顺序例题分析

    1. 当Promise对象作为resolve的参数时

    const p = Promise.resolve(); 
    const p1 = Promise.resolve(p); //就是p
    const p2 = new Promise(res => res(p)); //新建一个对象,对象状态依赖p
    // res(p)可以看作 await p1; await resolve();
    // 或者p.then(data => getData()).then(() => p2.resolve())
    
    // 首先;p1 === p; p2!===p
    // 那么,p1是一个fulfilled状态的对象;p2状态需要运行后求得
    console.log(p === p1); // true
    console.log(p === p2); // false
    
    p1.then(() => {
        console.log('p1-1');
    }).then(() => {
        console.log('p1-2');
    }).then(() => {
        console.log('p1-3');
    })
    p2.then(() => { //p2.resolve之后才能调用回调函数
        console.log('p2-1');
    }).then(() => {
        console.log('p2-2');
    }).then(() => {
        console.log('p2-3');
    })
    p.then(() => {
        console.log('p-1');
    }).then(() => {
        console.log('p-2');
    }).then(() => {
        console.log('p-3');
    })
    //  运行结果
    // getData()
    p1-1
    p-1
    // resolve()
    p1-2
    p-2
    p2-1
    p1-3
    p-3
    p2-2
    p2-3

    2. 当Promise的resolve方法在另一个Promise对象的then方法中运行时,变异步;

    let p3;
    p1 = new Promise(resolve => {
        p3 = new Promise(res => res());
        p3.then(() => {
            console.log('p3')
            resolve(); // resolve()方法用在then方法中,变为异步执行
        })
    })
    p1.then(() => {
        console.log('p1-1');
    }).then(() => {
        console.log('p1-2');
    })
    p3.then(() => {
        console.log('p3-1')
    }).then(() => {
        console.log('p3-2')
    })
    // 运行结果如下:
    p3
    p3-1
    p1-1
    p3-2
    p1-2

    示例:

    const p1 = Promise.resolve();
    let p3;
    const p2 = new Promise(function(resolve, reject){
        p3 = new Promise(res => res(p1));
        p3.then(() => {  //1 p3.then第一个
            console.log('p3')
            resolve('ok');
        })
    });
    p1.then(() => {
        console.log('p1-1')
    }).then(() => {
        console.log('p1-2')
    }).then(() => {
        console.log('p1-3')
    })
    p2.then(function(data) {
        console.log('p2-1')
    }).then(function(data) {
        console.log('p2-2')
    }).then(function(data) {
        console.log('p2-3')
    })
    // p3.then第二个,p3状态变化触发then方法时,同时触发,按照先后顺序执行
    // 只要时p3.then(...)都同时触发
    p3.then(function(data) { 
        console.log('p3-1')
    }).then(function(data) {
        console.log('p3-2')
    }).then(function(data) {
        console.log('p3-3')
    })
    // 运行结果
    p1-1
    p1-2
    p3
    p3-1
    p1-3
    p2-1
    p3-2
    p2-2
    p3-3
    p2-3

    3. 当使用catch()方法捕获异常时

    const p1 = Promise.resolve();
    const p2 = Promise.reject(); //状态为rejected
    p1.then(() => {
        console.log('p1-1')
    }).then(() => {
        console.log('p1-2')
    }).then(() => {
        console.log('p1-3')
    })
    p2.then(function(data) { //会立即触发,但是触发的是then中省略的第二个函数;
        console.log('p2-1')
    }).then(function(data) {
        console.log('p2-2')
    }).then(function(data) {
        console.log('p2-3')
    }).catch(() => {
        console.log('catched')
    })
    //  运行结果如下:
    p1-1
    // 默认运行p2的第一个错误回调
    p1-2
    // 默认运行p2的第二个错误回调
    p1-3
    // 默认运行p2的第三个错误回调
    catched

     4. 当有async函数时

    async function async1() {
      console.log('async1 start');
      await async2(); //async()函数执行是同步调用;生成Promise后等待状态改变返回结果是then任务
      console.log('async1 end');
    }
    async function async2() {
      console.log('async2');
    }
    console.log('script start');
    setTimeout(() => {
      console.log('setTimeout')
    })
    async1();
    new Promise((resolve, reject) => {
      console.log('promise1');
      resolve();
    }).then(() => {
      console.log('promise2');
    })
    // 运行结果如下
    script start
    async1 start
    async2
    promise1
    async1 end
    promise2
    setTimeout
  • 相关阅读:
    SQL注入工具大比拼
    黑客知识 彻底堵死SQL注入工具漏洞
    基于jQuery 常用WEB控件收集
    R400安装Windows2003网卡驱动
    预防网站漏洞扫描工具入侵:
    LRU页面置换算法模拟
    Unix编程/应用问答中文版 6./etc/system可调资源限制
    Microsoft uaa bus driver for high definition audio
    UNIX/LINUX 平台可执行文件格式分析
    Modem Device on High Definition Audio Bus
  • 原文地址:https://www.cnblogs.com/lyraLee/p/11823354.html
Copyright © 2011-2022 走看看