Promise学习笔记

Doing
76 阅读12分钟

第 1 章：Promise 的理解和使用

1.1. Promise 是什么?

1.1.1. 理解

  1. 抽象表达:

    1. Promise 是一门新的技术(ES6 规范)
    2. Promise 是 JS 中进行异步编程的新解决方案（备注：旧方案是单纯使用回调函数）

    异步编程包含：

    • fs 文件操作  // require('fs').readFile('./index.html, (err,data)=>{})
    • 数据库操作
    • AJAX    // $.get('/serve', (data)=>{})
    • 定时器  //setTimeout(()=>{}, 2000)

  2. 具体表达:

    1. 从语法上来说: Promise 是一个构造函数
    2. 从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值

1.1.2. 状态改变

  1. promise属性

    • promiseState: promise状态， 实例对象中的一个属性

      只有一下两种转化，且一个promise对象只能改变一次：

      pending-->resolved / fullfilled

      pending-->rejected

    • promiseResult：promise对象的值，保存对象成功或失败的结果

      resolve reject 两个函数可以修改该值

  2. 状态改变

    1. pending 变为 resolved

    2. pending 变为 rejected

    • 说明: 只有这 2 种, 且一个 promise 对象只能改变一次
    • 无论变为成功还是失败, 都会有一个结果数据
    • 成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

1.1.3. 基本流程

image.png

1.1.4. 基本使用

初体验

image.png

fs模块

image.png

image.png

AJAX模块

image.png

image.png

promiseify方法使用

image.png

fs封装

image.png

1.2. 为什么要用 Promise?

1.2.1. 指定回调函数的方式更加灵活

  1. 旧的: 必须在启动异步任务前指定
  2. promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)

1.2.2. 支持链式调用, 可以解决回调地狱问题

  1. 什么是回调地狱?

    回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件（套娃）

  2. 回调地狱的缺点?

    不便于阅读

    不便于异常处理

  3. 解决方案?

    promise 链式调用

  4. 终极解决方案?

    async/await

// 成功的回调函数
function successCallback(result) {
console.log("声音文件创建成功: " + result);
}
// 失败的回调函数
function failureCallback(error) {
console.log("声音文件创建失败: " + error);
}

/* 1.1 使用纯回调函数 */
createAudioFileAsync(audioSettings, successCallback, failureCallback)

/* 1.2. 使用 Promise */
const promise = createAudioFileAsync(audioSettings); // 2
setTimeout(() => {
  promise.then(successCallback, failureCallback);
}, 3000);
  
/*
2.1. 回调地狱
*/
doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doThirdThing(newResult, function(finalResult) {
      console.log('Got the final result: ' + finalResult)
    }, failureCallback)
  }, failureCallback)
}, failureCallback)

/*
2.2. 使用 promise 的链式调用解决回调地狱
*/
doSomething().then(function(result) {
  return doSomethingElse(result)
})
.then(function(newResult) {
  return doThirdThing(newResult)
})
.then(function(finalResult) {
  console.log('Got the final result: ' + finalResult)
})
.catch(failureCallback)

/*
2.3. async/await: 回调地狱的终极解决方案
*/
async function request() {
  try {
    const result = await doSomething()
    const newResult = await doSomethingElse(result)
    const finalResult = await doThirdThing(newResult)
    console.log('Got the final result: ' + finalResult) 
  }catch (error) {
    failureCallback(error) 
  }
}
</script>

1.3. 如何使用 Promise?

1.3.1. API

Promise 构造函数: Promise (excutor) {}

(1) executor 函数: 执行器 (resolve, reject) => {}

(2) resolve 函数: 内部定义成功时我们调用的函数 value => {}

(3) reject 函数: 内部定义失败时我们调用的函数 reason => {}

说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行

Promise.prototype.then 方法: (onResolved, onRejected) => {}

(1) onResolved 函数: 成功的回调函数 (value) => {}

(2) onRejected 函数: 失败的回调函数 (reason) => {}

说明: 指定用于得到成功value的成功回调和用于得到失败reason的失败回调,返回一个新的 promise

返回值是否成功不是取决于调用了onResolved还是onRejected，而是onResolved和onRejected的执行结果返回的是promise对象还是非promise对象

Promise.prototype.catch 方法: (onRejected) => {}

(1) onRejected 函数: 失败的回调函数 (reason) => {}

说明: Promise.prototype**.**then()的语法糖, 相当于: then(undefined, onRejected)

Promise.resolve 方法: (value) => {}

(1) value: 成功的数据或 promise 对象

(2) 这个resolve方法不属于实例对象，而是属于promise这个函数对象的

说明: 如果传入参数为非promise对象，则返回结果为成功的promise对象，如果传入参数为promise对象，则参数结果决定resolve的结果

Promise.reject 方法: (reason) => {}

(1) reason: 失败的原因

(2) 这个reject方法不属于实例对象，而是属于promise这个函数对象的

说明: 无论传入什么都是失败的promise对象

Promise.all 方法: (promises) => {}

(1) promises: 包含 n 个 promise 的数组

说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败

Promise.race 方法: (promises) => {}

(1) promises: 包含 n 个 promise 的数组

说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

1.3.2. promise 的几个关键问题

  1. 如何改变 promise 的状态?

    (1) resolve(value): 如果当前是 pending 就会变为 resolved

    (2) reject(reason): 如果当前是 pending 就会变为 rejected

    (3) 抛出异常: 如果当前是 pending 就会变为 rejected

  2. 一个 promise 指定多个成功/失败回调函数, 都会调用吗?

    当 promise 改变为对应状态时都会调用

  3. 改变 promise 状态和指定回调函数谁先谁后?

    不一定，看改变promise状态是同步还是异步，异步则指定回调先，通常是指定回调先（注意：调用回调都是最后才执行，指定回调与调用回调不是一回事）

    • 同步：在执行器中直接调用 resolve()/reject();

      如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

//先改状态, 后指定回调函数
new Promise((resolve, reject) => {
  resolve(1) // 先改变的状态(同时指定数据)
}).then(// 后指定回调函数, 异步执行回调函数
  value => {console.log('value2', value)},
  reason => {console.log('reason2', reason)}
)

  • 异步：使用定时器等方法

    如果先指定回调, 那当状态发生改变时, 回调函数就会调用, 得到数据

// 常规: 先指定回调函数, 后改变的状态
new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1) // 后改变的状态(同时指定数据), 异步执行回调函数
  }, 1000);
}).then(// 先指定回调函数, 保存当前指定的回调函数
  value => {},
  reason => {console.log('reason', reason)}
)

  1. promise.then()返回的新 promise 的结果状态由什么决定?

    (1) 简单表达: 由 then()指定的回调函数执行的结果决定

    (2) 详细表达:

    ① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常

    ② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值

    ③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果

  2. promise 如何串连多个操作任务?

    (1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用

    (2) 通过 then 的链式调用串连多个同步/异步任务

  3. promise 异常传透?

    (1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,

    (2) 前面任何操作出了异常, 都会传到最后失败的回调中处理

  4. 中断 promise 链?

    (1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数

    (2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象

    有且只有一个方式 return new promise(()=>{}) //因为返回一个pending ，状态没有改变，then就不会执行

第2章 自定义promise

2.1 promise的封装

1初始封装

声明构造函数

ps：this指向的时window ，所以需要使用self

image.png

throw情况下 需使用try catch

e=throw抛出的异常error

image.png

状态只能修改一次

在改变之前先判断promise状态，为pending才修改

image.png

then方法执行回调

image.png

异步时？  状态还未改变，所以then还要判断pending状态，声明一个callback对象保存onresolved和onrejected，然后在resolve和reject函数中调用

image.png

image.png

指定多个回调时？ 后面的回调会覆盖前面的，所以应该令callbacks为数组

image.png

image.png

同步任务--then返回结果

回顾.then特点：如果抛出异常，则为rejected，reason为抛出的异常

如果返回的为非promise对象，则为resolved，value为返回的值

如果返回的为promise对象，则为该promise的结果

1）then返回的应该是个promise对象，所以在then里封装return promise

2）判断返回的（即result）是非promise对象还是promise对象或者异常

image.png

异步任务--then返回结果

异步时状态还为pending，所以要在pending里也判断下

image.png

image.png

优化：同样的当状态为rejected时也需要如此操作（红框部分（try catch部分）可以封装外提，避免多次写）

image.png

image.png

2封装catch方法和异常穿透

image.png

3封装resolve方法

这个resolve方法不属于实例对象，而是属于promise这个函数对象的

image.png

4封装reject方法

image.png

5封装all方法

对象返回结果由所有promise的结果共同决定，全部为fulfilled才为成功

不可以用arr.push  因为arr.push可能会改变promise的顺序 应采用arr[i]=v

image.png

6封装race方法

对象返回结果由第一个执行的promise的结果决定（无论是否异步，第一个总先执行回调）

image.png

7回调函数是异步执行的 怎么封装这个特性

1、构造函数中resolve和reject函数的调用回调函数部分要加上定时器实现异步

2、then方法里面 当调用回调是加上定时器实现异步

image.png

image.png

8封装成class类

resolve reject all race 等都是指向类的而不是实例 所以加static修饰

image.png

9 完整代码

class Promise{
    //构造方法
    constructor(executor){
        //添加属性
        this.PromiseState = 'pending';
        this.PromiseResult = null;
        //声明属性
        this.callbacks = [];
        //保存实例对象的 this 的值
        const self = this;// self _this that
        //resolve 函数
        function resolve(data){
            //判断状态
            if(self.PromiseState !== 'pending') return;
            //1. 修改对象的状态 (promiseState)
            self.PromiseState = 'fulfilled';// resolved
            //2. 设置对象结果值 (promiseResult)
            self.PromiseResult = data;
            //调用成功的回调函数
            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onResolved(data);
                });
            });
        }
        //reject 函数
        function reject(data){
            //判断状态
            if(self.PromiseState !== 'pending') return;
            //1. 修改对象的状态 (promiseState)
            self.PromiseState = 'rejected';// 
            //2. 设置对象结果值 (promiseResult)
            self.PromiseResult = data;
            //执行失败的回调
            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onRejected(data);
                });
            });
        }
        try{
            //同步调用『执行器函数』
            executor(resolve, reject);
        }catch(e){
            //修改 promise 对象状态为『失败』
            reject(e);
        }
    }

    //then 方法封装
    then(onResolved,onRejected){
        const self = this;
        //判断回调函数参数
        if(typeof onRejected !== 'function'){
            onRejected = reason => {
                throw reason;
            }
        }
        if(typeof onResolved !== 'function'){
            onResolved = value => value;
            //value => { return value};
        }
        return new Promise((resolve, reject) => {
            //封装函数
            function callback(type){
                try{
                    //获取回调函数的执行结果
                    let result = type(self.PromiseResult);
                    //判断
                    if(result instanceof Promise){
                        //如果是 Promise 类型的对象
                        result.then(v => {
                            resolve(v);
                        }, r=>{
                            reject(r);
                        })
                    }else{
                        //结果的对象状态为『成功』
                        resolve(result);
                    }
                }catch(e){
                    reject(e);
                }
            }
            //调用回调函数  PromiseState
            if(this.PromiseState === 'fulfilled'){
                setTimeout(() => {
                    callback(onResolved);
                });
            }
            if(this.PromiseState === 'rejected'){
                setTimeout(() => {
                    callback(onRejected);
                });
            }
            //判断 pending 状态
            if(this.PromiseState === 'pending'){
                //保存回调函数
                this.callbacks.push({
                    onResolved: function(){
                        callback(onResolved);
                    },
                    onRejected: function(){
                        callback(onRejected);
                    }
                });
            }
        })
    }

    //catch 方法
    catch(onRejected){
        return this.then(undefined, onRejected);
    }

    //添加 resolve 方法
    static resolve(value){
        //返回promise对象
        return new Promise((resolve, reject) => {
            if(value instanceof Promise){
                value.then(v=>{
                    resolve(v);
                }, r=>{
                    reject(r);
                })
            }else{
                //状态设置为成功
                resolve(value);
            }
        });
    }

    //添加 reject 方法
    static reject(reason){
        return new Promise((resolve, reject)=>{
            reject(reason);
        });
    }

    //添加 all 方法
    static all(promises){
        //返回结果为promise对象
        return new Promise((resolve, reject) => {
            //声明变量
            let count = 0;
            let arr = [];
            //遍历
            for(let i=0;i<promises.length;i++){
                //
                promises[i].then(v => {
                    //得知对象的状态是成功
                    //每个promise对象 都成功
                    count++;
                    //将当前promise对象成功的结果 存入到数组中
                    arr[i] = v;
                    //判断
                    if(count === promises.length){
                        //修改状态
                        resolve(arr);
                    }
                }, r => {
                    reject(r);
                });
            }
        });
    }

    //添加 race 方法
    static race (promises){
        return new Promise((resolve, reject) => {
            for(let i=0;i<promises.length;i++){
                promises[i].then(v => {
                    //修改返回对象的状态为 『成功』
                    resolve(v);
                },r=>{
                    //修改返回对象的状态为 『失败』
                    reject(r);
                })
            }
        });
    }
}

第3章async和await如何使用？

async关键字用于声明一个function是异步的，被async修饰的函数返回的是一个promise；await只能在async函数中使用，用于等待一个异步方法执行完成，await等待的内容可以是常量、变量、promise、函数等。async/await中的错误处理：使用try-catch来错误捕捉；使用promise的catch来错误捕捉

async

1.函数的返回值为 promise 对象，如果返回的是一个值，async会用Promise.resolve()包裹一下返回。

2.和then方法返回的规则一致

回顾.then特点：  如果抛出异常，则为rejected，reason为抛出的异常

如果返回的为非promise对象，则为resolved，value为返回的值

如果返回的为promise对象，则为该promise的结果

await

1.await 右侧的表达式一般为 promise 对象, 但也可以是其它的值

2.如果表达式是 promise 对象, await 返回的是 promise 成功的值

3.如果表达式是其它值, 直接将此值作为 await 的返回值

注意点

1.await 必须写在 async 函数中, 但 async 函数中可以没有 await

2.如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理或用promise的catch来做错误捕捉

3.为什么await关键词只能在async函数中用

await操作符等的是一个返回的结果，那么如果是同步的情况，那就直接返回了。

异步的情况下，await会阻塞整一个流程，直到结果返回之后，才会继续下面的代码。 阻塞代码是一个很可怕的事情，而async函数，会被包在一个promise中，异步去执行。所以await只能在async函数中使用，如果在正常程序中使用，会造成整个程序阻塞，得不偿失。

async和await结合

1、例子1

  • 回调函数的方式

image.png

  • async和await方式

image.png

  • ps：util有一个mineReadFile方法可以将api转换为promise类型函数

image.png

2、例子2

ps：ajax本身有用axios封装好的api

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>async与await结合发送AJAX</title>
</head>
<body>
    <button id="btn">点击获取段子</button>
    <script>
        //axios
        function sendAJAX(url){
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.responseType = 'json';
                xhr.open("GET", url);
                xhr.send();
                //处理结果
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        //判断成功
                        if(xhr.status >= 200 && xhr.status < 300){
                            //成功的结果
                            resolve(xhr.response);
                        }else{
                            reject(xhr.status);
                        }
                    }
                }
            });
        }

        //段子接口地址 https://api.apiopen.top/getJoke
        let btn = document.querySelector('#btn');

        btn.addEventListener('click',async function(){
            //获取段子信息
            let duanzi = await sendAJAX('https://api.apiopen.top/getJoke');
            console.log(duanzi);
        });
    </script>
</body>
</html>

/**
 * resource  1.html  2.html 3.html 文件内容
 */

const fs = require('fs');
const util = require('util');
const mineReadFile = util.promisify(fs.readFile);

//回调函数的方式
// fs.readFile('./resource/1.html', (err, data1) => {
//     if(err) throw err;
//     fs.readFile('./resource/2.html', (err, data2) => {
//         if(err) throw err;
//         fs.readFile('./resource/3.html', (err, data3) => {
//             if(err) throw err;
//             console.log(data1 + data2 + data3);
//         });
//     });
// });

//async 与 await
async function main(){
    try{
        //读取第一个文件的内容
        let data1 = await mineReadFile('./resource/1x.html');
        let data2 = await mineReadFile('./resource/2.html');
        let data3 = await mineReadFile('./resource/3.html');
        console.log(data1 + data2 + data3);
    }catch(e){
        console.log(e.code);
    }
}

main();
avatar
文章
阅读
粉丝