Promise笔记

ES6中的Promise

  1. 什么是promise

    promise是异步编程的一种解决方案(比回调函数和事件侦听更强大)

  2. promise有什么作用

    通过promise可以实现异步编程,让程序按照预设的顺序执行(按队列执行)

  3. 如何使用promise

    let promise =  new Promise(function(resolve, reject){
         // 一些耗时操作代码,例如向后台获取数据
         ...
        ...
         if(true){ // 成功
             resolve("成功后需要传递出去的数据");
     }else{ // 失败
             reject("失败后需要传递出去的数据");
     }
    });
    
    promise.then().then()... // 可以链式调用多个then()方法
    

Promise的三个状态

promise的状态一旦发生改变就不会再改变[resolve凝固]

1.Pending [待定]初始化
2.Fulfilled [实现]操作成功
3.Rejected [被否决]操作失败

状态的变化只有两种情况
Pending -> Fulfilled [成功]
Pending -> Rejected [失败]

Promise的then(fulfilled,rejected)函数

  • .then()函数接受两个函数作为参数,分别代表fulfilledrejected
  • .then()函数返回一个新的 Promise实例,所以它可以链式调用

  • 当前面的Promise 状态改变时, .then()会根据最终的状态选择特定的状态响应函数去执行

  • 状态响应函数可以返回新的Promise,或其他值

  • 如果返回新的Promise, 那么下一级.then()会在新 Promise状态改变之后执行

  • 如果返回的是其他任何值,则会立即执行下一级 .then()

// then函数的两个参数
.then(fulfilled => {
    // 成功
}, rejected => {
    // 失败
})

Promise在当前脚本的执行顺序

首先会执行完当前脚本的同步代码,再执行队列中的异步代码(then()函数)

console.log(1);

var promise = new Promise((resolve, reject) => {
    console.log(2);
    resolve(3); // 执行到这异步时,会将任务放到队列中等待执行,此时promise对象还是处于pending状态,直到当前脚步的同步代码执行完毕后,再执行队列中的代码(栈模式)
    
}).then(value => {
    console.log(value);
}, err => {
    console.log(err);
})

console.log(4);
 
// 输出的结果是: 1 2 4 3

Promise异常处理

处理promise错误有两种方式,第一种是将错误交给rejected响应函数,第二种是使用catch()捕获错误并处理。

promise会自动捕获内部异常,并交给rejected响应函数处理,但有多个then()函数时需要在每个then()中都定义rejected处理函数,这样会比较麻烦。建议使用第二种方法(可以一次性处理多个then()的异常错误)

// 使用第二种方法处理异常错误
console.log('go');

new Promise((resolve, reject) => {
    console.log('侦听器函数内部代码被执行!');
    
    // 两秒之后抛出一个错误
    setTimeout(() => {
        resolve('成功返回数据');
    }, 2000);
    
}).then(value => {
    console.log('第一个then:', value);
    
    return new Promise((resolve, reject) =>{
        throw new Error('第一个then抛出一个错误');
    })
}).then(value => {
    // 上一个then抛出错误后,不会执行这里的代码
    console.log('第二个then:', value);

}).catch(error => {
    // catch可以捕获到任何一个then()抛出的错误
    console.log('错误信息:', error);
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Promise学习(上): 资料: JavaScript Promise迷你书 原著:azu / 翻译:liubi...
    你隔壁的陌生人阅读 3,624评论 0 1
  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 12,774评论 1 56
  • Promiese 简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,语法上说,Pr...
    雨飞飞雨阅读 8,631评论 0 19
  • 一、Promise的含义 Promise在JavaScript语言中早有实现,ES6将其写进了语言标准,统一了用法...
    Alex灌汤猫阅读 4,245评论 0 2
  • 军训就要结束了,老师安排一场数学课堂考试。拿到卷子后,我浏览一遍试题,哈哈!这试卷一百分稳拿,不...
    高山信阅读 4,340评论 1 1