JavaScript基础（七）Promise

蓝胖子的小叮当
81 阅读3分钟

大家好，我是蓝胖子的小叮当，今天分享的是JavaScript的第七章Promise，大家在阅读期间有任何的意见或建议都可以留言给我哈！

7.1前言

Promise是一个对象，它代表一个最终会完成或失败的异步操作。Promise是为了解决回调地狱的痛点，是异步编程的解决方案。

7.2状态

Promise本质是一个状态机，可以将它划分为三个阶段：

  1. pending（进行中）状态还在等待中，没有被兑现，也没有被拒绝
  2. fulfilled（已完成）代表已兑现状态
  3. rejected（已失败）代表已拒绝状态

状态的变更是单向的，只能从pending->fulfilled或pending->rejected，状态变更不可逆。

7.3构造函数

Promise是通过构造函数创建的，其参数是一个函数，该函数接受两个参数：resolve和reject。

  1. resolve函数用于将Promise的状态由pending变更为fulfilled，并传递成功的值，同时会回调Promise对象的then方法

  2. reject函数用于将Promise的状态由pending变更为rejected，并传递失败的值，同时会回调Promise对象的catch方法

7.4实例方法

Promise对象具有then()、catch()、finally()三种方法。

  1. then()方法用于指定Promise的状态变更为fulfilled的调用方法，允许链式调用。
  2. catch()方法用于指定Promise的状态变更为rejected的调用方法，不允许链式调用。
  3. finally()方法用于无论Promise是成功还是失败，都会执行的方法，允许链式调用。
7.5链式调用

  1. then()和finally()会按顺序依次执行，每一个then()都会被执行，直到异常跳到catch();

  2. then()默认会向下顺序执行，return是不能中断的，可以通过throw,如：throw new Error("error!!!") 来跳转至catch()实现中断;

  3. catch()块只会执行第一个，并且再书写链式调用时，将catch()放在最后，因为catch()执行后，catch()后续的then()和finally()也会被照常调用；

  4. then()或catch()返回的值不能时Promise本身，否则会造成死循环。

7.6原型方法
  1. Promise.all() 多个Promise任务同时执行，如果全部成功则返回数组的形式的执行结果，如果有失败则返回那失败的任务结果（等待所有兑现（或第一个拒绝）的结果）（有一个失败则结果为失败）
  2. Promise.allSettled() 无论成功与否都等异步结束再继续执行,返回数组的形式的执行结果
  3. Promise.any() 多个Promise任务同时执行，如果全部失败则返回数组的形式的执行结果，如果有成功则返回那成功的任务结果（等待所有失败（或第一个成功）的结果）（有一个成功则结果为成功）
  4. Promise.race() 多个Promise任务同时执行时，返回最先执行完的Promise任务的结果
7.7示例
let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("任务完成1"), 1000);
});
promise.then(result => {
    console.log(result);
    return "任务完成2";
}).then(result => {
    console.log(result);
    throw new Error('中断链式调用');
}).finally(() => {
    console.log("操作完成");
}).then(() => {
    console.log("链式调用结束");
}).catch(error => {
    console.error(error);
})
// 任务完成1
// 任务完成2
// 操作完成
// Error：中断链式调用

fetchData() {
    const request1 = axios.get('/api/data1'); // 第一个请求
    const request2 = axios.get('/api/data2'); // 第二个请求
    Promise.all([request1, request2]) // 将所有请求包装成Promise对象
        .then(responses => {
            // 根据返回的数据进行相应操作
            this.processResponse(responses[0].data);
            this.processResponse(responses[1].data);
        })
        .catch(error => {
            console.error('请求失败', error); // 错误处理
        });
},

processResponse(response) {
    // 处理每个请求的返回数据
    console.log('处理返回数据', response);
}

好啦，关于Promise的知识点就总结到这里，如果有什么疑问、意见或建议，都可畅所欲言，谢谢大家，我也将持续更新。

预告：Promise不易读，代码复杂？欢迎收看JavaScript基础的下一章：Async/Await

avatar
文章
阅读
粉丝