ES6 异步编程解决方案之 Promise 对象

程序员文章站 2023-12-22 13:45:34

...

一、Promise 概述

Promise 对象是 ES6 提供的原生的内置对象
Promise 是异步编程的一种解决方案（异步代码同步化），比传统的解决方案——回调函数和事件——更合理和更强大
Promise 对象代表一个异步操作， 其不受外界影响，有三种状态：
- Pending（进行中、未完成的）
- Resolved（已完成，又称 Fulfilled）
- Rejected（已失败）

二、Promise 对象的优缺点

1. 优点

异步编程解决方案，避免了回调地狱（Callback Hell）问题

// 回调地狱

firstAsync(function(data){
    //处理得到的 data 数据
    //....
    secondAsync(function(data2){
        //处理得到的 data2 数据
        //....
        thirdAsync(function(data3){
              //处理得到的 data3 数据
              //....
        });
    });
});

// 使用 Promise 解决方案

firstAsync()
.then(function(data){
    //处理得到的 data 数据
    //....
    return secondAsync();
})
.then(function(data2){
    //处理得到的 data2 数据
    //....
    return thirdAsync();
})
.then(function(data3){
    //处理得到的 data3 数据
    //....
});

2. 缺点

Promise 对象，一旦新建它就会立即执行，无法中途取消

let Promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

Promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

Promise 状态一旦改变，就不会再变

const Promise = new Promise(function(resolve, reject) {
    resolve('ok');
    throw new Error('test');
});
Promise
    .then(function(value) { console.log(value) })
    .catch(function(error) { console.log(error) });

// 只输出 ok

当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

三、Promise 的基本用法

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例
语法：
- Promise 构造函数：接收一个函数参数，函数参数中有两个参数 resolve 、reject
- 参数 resolve 、reject 都是函数（由 JavaScript 引擎提供，不用自己部署），在异步操作成功时，手动执行函数resolve ；在异步操作失败时，手动执行函数reject
- Promise实例生成以后，可以用 then 、catch 方法分别指定成功状态、失败状态的回调函数

const promise = new Promise(function(resolve, reject) {
    // 异步操作 code

    // 手动执行 resolve / reject 函数
    if (/* 异步操作成功 */){
        resolve(value);
    } else {
        reject(error);
    }
});

promise
  .then((value) => {})
  .catch((error) => {});

异步编程解决方案： 将异步任务同步操作（一般情况下 Promise 对象集结合 then、catch 使用）
- 异步任务：在创建 Promise 对象中执行（ Promise 对象中的代码会立即执行 ）
- 需要在异步任务之后执行的代码：放到 then、catch 中

四、Promise 原型上的方法

1. then 方法

作用： 为 Promise 实例添加 状态改变（成功、失败）时的回调函数
语法： Promise.then(resolve, reject)
- 参数：
  - 参数 resolve：异步操作成功时的回调函数
  - 参数 reject：异步操作失败时的回调函数（可省略）
- 返回值： 一个新的Promise实例（不是原来那个Promise实例），可采用链式写法

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

// 如上：第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数

返回值有可能是含有异步操作的 Promise 对象， 这时之后的 then 方法中的函数，就会等待该 Promise 对象的状态发生变化，才会被调用

const getPromise = () => {
    const Promise = new Promise(function (resolve, reject) {});

    return Promise;
}

getPromise().then(
    param => getPromise(param)
).then(
    comments => console.log("resolved: ", comments),
    err => console.log("rejected: ", err)
);

2. catch 方法

作用： 为 Promise 实例添加 状态变为 reject 时的回调函数
语法： Promise.catch(reject)
等同于： Promise.then(null, reject)

// 示例如下（Promise抛出一个错误，就被catch方法指定的回调函数捕获）

const Promise = new Promise(function(resolve, reject) {
  throw new Error('test');
});

Promise.catch(function(error) {
  console.log(error);
});
// Error: test

Promise 对象的错误具有“冒泡”性质： 会一直向后传递，直到被捕获到为止

const getPromise = () => {
    const Promise = new Promise(function (resolve, reject) {});

    return Promise;
}

getPromise().then(function(post) {
    return getJSON(post.commentURL);
}).then(function(comments) {
    // some code
}).catch(function(error) {
    // 处理前面三个Promise产生的错误：无论是 getJSON产生错误，还是 then 产生的错误，都会由 catch 捕捉到
});

最佳实践： 一般来说，不要在then方法里面定义 reject 状态的回调函数

// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
promise
  .then(function(data) {
    // success
  })
  .catch(function(err) {
    // error
  });

3. finally 方法

作用： 为 Promise 实例添加回调函数（不管状态是 resolve、 reject），该回调函数都执行
语法： promise.finally(() => {}) 不接受任何参数
举例应用：服务器使用 Promise 处理请求，然后使用 finally 方法关掉服务器

promise
    .then(result => {···})
    .catch(error => {···})
    .finally(() => {···});

4. `then`、`catch`、`finally` 回调的执行顺序

以下原则适用于： new Promise(...) 、Promise.resolve(...) 、 Promise.reject(...)
- 回调函数如果是 同步函数： 会在本轮事件循环的末尾执行（下一轮循环之前）
- 回调函数如果是 异步函数： 会在本轮事件循环的末尾将该异步函数放入到事件循环队列中，等待时间为 0s （也就是在下一轮循环的最后执行）
示例如下：

// 回调函数 是 同步函数

setTimeout(function () {
    console.log(3);
}, 0);

const promise = new Promise(function (resolve, reject) {
    console.log(6);
    resolve();
});

setTimeout(function () {
    console.log(4);
}, 0);

promise.then(() => {
    console.log(2);
});

setTimeout(function () {
    console.log(5);
}, 0);

console.log(1);

// 6 1 2 3 4 5

// 回调函数 是 异步函数

setTimeout(function () {
    console.log(3);
}, 0);

const promise = new Promise(function (resolve, reject) {
    console.log(6);
    resolve();
});

setTimeout(function () {
    console.log(4);
}, 0);

promise.then(() => {
    setTimeout(() => {
        console.log(2);
    }, 0);
});

setTimeout(function () {
    console.log(5);
}, 0);

console.log(1);

// 6 1 3 4 5 2

5. 回顾：JS 的异常捕获

作用： 对于可能会出现错误的代码，使用异常捕获方式，可以使 JS 运行到错误代码处，不终止代码执行且抛出异常错误
三种最佳实践：
- try...catch
- try...finally
- try...catch...finally
详解：
- try 语句： 包含可能出现错误的代码
- catch 语句： 包含捕捉到错误，执行的代码
- finally 语句： 包含无论有没有错误，都要执行的代码
示例：

try {
    console.log(11);    // 可能会发生错误的代码
}
catch (e) {
   throw e;     // 抛出错误异常，且 catch 代码块中 throw 之后的代码 不会执行
}
finally {
    
}

五、多个异步都执行完成后，再执行回调：`Promise.all()`

作用： 将多个异步函数包装成一个 内部并行执行的 Promise 实例
关键： 包装后的 Promise 实例，内部函数并行执行；减少了执行时间
语法： const promise = Promise.all([p1, p2, p3])
- p1、p2、p3都是 Promise 实例；如果不是Promise 实例，就会先调用 Promise.resolve 方法，将参数转为 Promise 实例
- 参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例
使用场景： 多个异步都执行完成后，再执行回调

Promise
  .all([runAsync1(), runAsync2(), runAsync3()])
  .then((results) => {
      console.log(results);
  });
  
// 如上：三个异步操作 会 并行执行，等到它们都执行完后，才会执行 then 里面的代码；
// 三个异步操作的结果，组成数组 传给了 then; 也就是 输出上述 result 为 [异步1数据，异步2数据，异步3数据]

包装后的 Promise 的状态（区别所在）
- 只有p1、p2、p3的状态都变成 fulfilled，p的状态才会变成 fulfilled；此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数
- 只要p1、p2、p3之中有一个被 rejected，p的状态就变成rejected；此时第一个被 reject 的实例的返回值，会传递给p的回调函数
Promise 的状态决定执行 then 回调，还是执行 catch 回调

const p1 = new Promise((resolve, reject) => {
        resolve('hello');
    })
    .then(result => result)
    .catch(e => e);

const p2 = new Promise((resolve, reject) => {
        throw new Error('报错了');
    })
    .then(result => result);

Promise.all([p1, p2])
    .then((result) => {
        console.log('then');
        console.log(result)
    })
    .catch((e) => {
        console.log('error')
        console.log(e);
    });

// 'error', Error: 报错了

const p1 = new Promise((resolve, reject) => {
        resolve('hello');
    })
    .then(result => result)
    .catch(e => e);

const p2 = new Promise((resolve, reject) => {
        throw new Error('报错了');
    })
    .then(result => result)
    .catch(e => e);

Promise.all([p1, p2])
    .then((result) => {
        console.log('then');
        console.log(result)
    })
    .catch((e) => {
        console.log('error')
        console.log(e);
    });

// 'then', ["hello", Error: 报错了]
// 解释：因为 p2 有自己的 catch, 错误才 p2 处被拦截

六、多个异步中有一个完成，就执行回调：`Promise.race()`

作用： 将多个异步函数包装成一个 内部并行执行的 Promise 实例
关键： 包装后的 Promise 实例，内部函数并行执行；减少了执行时间
语法： const promise = Promise.race([p1, p2, p3])
- p1、p2、p3都是 Promise 实例；如果不是Promise 实例，（如果是函数）就会先调用下面讲到的 Promise.resolve 方法，将参数转为 Promise 实例
- 参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例
使用场景： 多个异步中有一个完成，就执行回调

Promise
  .race([runAsync1(), runAsync2(), runAsync3()])
  .then((results) => {
      console.log(results);
  });
  
// 如上：三个异步函数会并行执行，只要有一个执行完，就会执行 then；
// 率先执行完的异步函数的结果 作为参数 传递给 then 中的回调函数

// 请求超时的 demo

const p1 = myAjax('/resource-that-may-take-a-while');
const p2 = new Promise(function (resolve, reject) {
        setTimeout(() => reject(new Error('request timeout')), 5000)
    });

Promise.race([p1, p2])
    .then(response => console.log(response))
    .catch(error => console.log(error));

包装后的 Promise 的状态（区别所在）
- p1、p2、p3 中 率先改变状态的 Promise 的状态值，直接影响包装后的Promise 的状态；
- 那个率先改变的 Promise 实例的返回值，就传递给p的回调函数

六、快速生成 Promise 对象的方法

1. `Promise.resolve()`

作用： 将现有对象转为 Promise 对象（状态为 resolve）
等价于：

Promise.resolve('foo');

// 等价于

new Promise((resolve, reject) => {
    resolve('foo');
});

参数的几种形式：
- 参数是具有then方法的对象： 转为 Promise 对象，并立即执行对象的 then 方法 【重点区分】
- 参数是 Promise 实例： 那么Promise.resolve将不做任何修改、原封不动地返回这个实例
- 不带有任何参数： 最快速生成 Promise 对象

// 参数是 具有then方法的对象

let thenable = {
    then: function (resolve, reject) {
        console.log('then');
        resolve(42);
    }
};

Promise.resolve(thenable);  //  输出 then

// 不带参数，快速生成 Promise 对象

Promise.resolve();

2. `Promise.reject()`

作用： 返回一个新的 Promise 实例，该实例的状态为 rejected
等价于：

Promise.reject('出错了');

// 等价于

new Promise((resolve, reject) => {
    reject('报错了');
});

参数： 无论参数是什么都会原封不动的作为错误理由 【重点区分】

七、Promise 的应用

Promise 实现异步加载图片

// Promise 实现 单张图片 异步加载（预加载）

function loadImageAsync(url) {
    return new Promise(function (resolve, reject) {
        const image = new Image();

        image.onload = function () {
            resolve(image);
        };

        image.onerror = function () {
            reject(new Error('Could not load image at ' + url));
        };

        image.src = url;
    });
}

loadImageAsync('./1png')
    .then((img) => {
        console.log(img); // 图片标签
    })

// Promise 实现 多张图片 异步加载（预加载）

function loadImageAsync(url) {
    return new Promise(function (resolve, reject) {
        const image = new Image();

        image.onload = function () {
            resolve(image);
        };

        image.onerror = function () {
            reject(new Error('Could not load image at ' + url));
        };

        image.src = url;
    });
}

function getImages(source) {
    const imgs = [];

    source.forEach(url => {
        loadImageAsync(url)
            .then((img) => {
                imgs.push(img);
            })
    });

    return imgs;
}

console.log(getImages(['1.png', '2.png']));

// ES5 实现图片异步加载

function getAsyncLoadImages(source) {
    const imgs = [];

    source.forEach(function (url, i) {
        imgs[i] = new Image();
        imgs[i].onload = function () {
            // console.log(imgs[i]);
        }

        imgs[i].onerror = function () {
            reject(new Error('Could not load image at ' + url));
        };

        imgs[i].src = url;
    })

    return imgs;
}

const result = getAsyncLoadImages(['1.png', '2.png']);
console.log(result);

ES6 异步编程解决方案之 Promise 对象

一、Promise 概述

二、Promise 对象的优缺点

1. 优点

2. 缺点

三、Promise 的基本用法

四、Promise 原型上的方法

1. then 方法

2. catch 方法

3. finally 方法

4. `then`、`catch`、`finally` 回调的执行顺序

5. 回顾：JS 的异常捕获

五、多个异步都执行完成后，再执行回调：`Promise.all()`

六、多个异步中有一个完成，就执行回调：`Promise.race()`

六、快速生成 Promise 对象的方法

1. `Promise.resolve()`

2. `Promise.reject()`

七、Promise 的应用

异步的解决方案-ES6的Promise

ES6 异步编程解决方案之 Promise 对象

es6——异步编程的解决方案 Promise

ES6基础之 Promise 对象用法实例详解

ES6学习之Promise对象的理解

ES6之Promise对象介绍

ES6基础之 Promise 对象用法实例详解

ES6要点总结（3）-Promise异步编程解决方案

前端面试之---Promise实现多个请求并成功拿到数据后再执行其他异步请求---ES6中的Promise

ES6入门之Promise对象

ES6 异步编程解决方案 之 Promise 对象

一、Promise 概述

二、Promise 对象的 优缺点

1. 优点

2. 缺点

三、Promise 的基本用法

四、Promise 原型上的 方法

1. then 方法

2. catch 方法

3. finally 方法

4. then、catch、finally 回调的执行顺序

5. 回顾：JS 的异常捕获

五、多个异步 都 执行完成后，再执行回调：Promise.all()

六、多个异步 中 有一个完成，就执行回调：Promise.race()

六、快速生成 Promise 对象 的方法

1. Promise.resolve()

2. Promise.reject()

七、Promise 的应用

异步的解决方案-ES6的Promise

ES6 异步编程解决方案 之 Promise 对象

es6——异步编程的解决方案 Promise

ES6基础之 Promise 对象用法实例详解

ES6学习之Promise对象的理解

ES6之Promise对象介绍

ES6基础之 Promise 对象用法实例详解

ES6要点总结（3）-Promise异步编程解决方案

前端面试之---Promise实现多个请求并成功拿到数据后再执行其他异步请求---ES6中的Promise

ES6入门之Promise对象

ES6 异步编程解决方案之 Promise 对象

二、Promise 对象的优缺点

四、Promise 原型上的方法

4. `then`、`catch`、`finally` 回调的执行顺序

五、多个异步都执行完成后，再执行回调：`Promise.all()`

六、多个异步中有一个完成，就执行回调：`Promise.race()`

六、快速生成 Promise 对象的方法

1. `Promise.resolve()`

2. `Promise.reject()`

ES6 异步编程解决方案之 Promise 对象