• ES6 Promise


    1.Promise 是异步编程的一种解决方案

    1. const promise = new Promise(function(resolve, reject) {
    2. if (/* 异步操作成功 */){
    3. resolve(value);
    4. } else {
    5. reject(error);
    6. }
    7. })

    2.Promise的三种状态

    待定(pending): 初始状态,既没有被兑现,也没有被拒绝。

    已兑现(fulfilled): 意味着操作成功完成。

    已拒绝(rejected): 意味着操作失败。

    1. // pending
    2. new Promise((resolve, reject) => {})
    3. // fulfilled
    4. new Promise((resolve, reject) => { resolve('hello world') })
    5. // rejected
    6. new Promise((resolve, reject) => { reject('bad code') })

    3.Promise的状态一旦状态改变,就不会再变

    1. // 思考这里的打印结果
    2. new Promise((resolve, reject) => {
    3. reject('bad code')
    4. resolve('hello world')
    5. }).then(val => {
    6. console.log(val)
    7. }).catch(err => {
    8. console.log(err)
    9. })

    4.思考题:

    在不使用Promise的情况下,如果实现一个计数器将输入的2个数字相加,在间隔1s后,将所得结果再进行下一次计算(不断回调,容易引起回调地狱)

    5.promise相关的方法

    • Promise.resolve()方法会返回一个状态为fulfilled的promise对象。
    1. Promise.resolve(2).then((val) => {
    2. console.log(val)
    3. })
    • Promise.reject()方法返回一个带有拒绝原因的Promise对象。
    1. Promise.reject({ message: '接口返回错误' }).catch((err) => {
    2. console.log(err)
    3. })
    • Promise.all() 方法接收一个promise的iterable类型(注:Array,Map,Set都属于ES6的iterable类型),返回一个promise实例。
    • Promise.all() 方法如果都是resolve()会等待所有执行完成后才输出结果;但是如果其中一个promise返回错误,会立即报错,不会等待其他执行完
    1. const promise1 = Promise.resolve(3);
    2. const promise2 = 42;
    3. const promise3 = new Promise((resolve, reject) => {
    4. setTimeout(() => {
    5. resolve('hello')
    6. }, 1000);
    7. });
    8. const promise4 = new Promise((resolve, reject) => {
    9. setTimeout(() => {
    10. resolve('world')
    11. }, 2000);
    12. });
    13. Promise.all([promise1, promise2, promise3, promise4]).then((values) => {
    14. console.log(values);
    15. });

    6.面试题

    1. function fn () {
    2. return new Promise((resolve) => {
    3. console.log('Promise1')
    4. fn1()
    5. setTimeout(() => {
    6. console.log('Promise2')
    7. resolve()
    8. console.log('Promise3')
    9. }, 0);
    10. })
    11. }
    12. async function fn1() {
    13. var p = Promise.resolve().then(() => {
    14. console.log('Promise6')
    15. })
    16. await p.then(() => {
    17. console.log('Promise7')
    18. })
    19. console.log('end')
    20. }
    21. console.log('script')
    22. setTimeout(() => {
    23. console.log('setTimeout')
    24. }, 0)
    25. fn().then(() => {
    26. console.log('Promise4')
    27. })

    Promise4最后打印,因为fn()函数的resolve是在定时器setTimeout里面执行的,所以定时器里面肯定先执行,然后执行完才执行Promise4

    1. 打印: script Promise1 Promise6 Promise7 end setTimeout Promise2 Promise3 Promise4
    2. 宏任务:setTimeout fn(setTimeout)
    3. 微任务:(Promise6 Promise7此时await所以的等待执行Promise6 Promise7) ->Promise4
    4. Promise4最后打印,因为fn()函数的resolve是在定时器setTimeout里面执行的,所以定时器里面肯定先执行,然后执行完才执行Promise4

  • 相关阅读:
    2022年9月4日:面向初学者的 web 开发--JavaScript 数组和循环(没有完全搞懂)
    万字详解JVM,让你一文吃透
    5 h0255. 迷宫问题,6 h0253. 鸣人和佐助(广度优先搜索)
    解析ERP管理系统的实施难题及解决方案
    22-09-04 西安 谷粒商城(01)MySQL主从复制、MyCat读写分离、MyCat分库分表
    .NET实现解析字符串表达式
    【HCIE】03.BGP高级特性
    聚观早报 | 苹果被曝开发16英寸iPad;5.5G已经取得关键进展
    Android学习笔记 28. Fragement总结
    Vue路由--无痕浏览 & NodeJs环境搭建
  • 原文地址:https://blog.csdn.net/qq_34569497/article/details/133919273