ES6的promise（期约）

最新推荐文章于 2023-01-12 12:00:41 发布

shakalaca

最新推荐文章于 2023-01-12 12:00:41 发布

阅读量336

点赞数

分类专栏：前端学习文章标签： javascript 学习

本文链接：https://blog.csdn.net/CathyleeQ/article/details/123944981

版权

前端学习专栏收录该内容

47 篇文章 8 订阅

订阅专栏

1. promise（期约）是什么？

一种异步程序执行的机制。
ECMAScript 6 新增的引用类型 Promise，可以通过 new 操作符来实例化。创建新期约时需要传入执行器（executor）函数作为参数。

1.1 promise三种状态

Promise 的状态
实例对象中的一个属性『PromiseState』

pending（待定）
fulfilled /（resolved解决）（成功）
rejected（拒绝）

pending 是promise的最初始状态。有两个转换方向：
1.成功（fulfilled or resolved）状态。
2.失败的拒绝（rejected）状态。

无论落定为哪种状态都是不可逆的，即一旦转换，状态不再改变。也就是说如果
只有异步操作的结果，可以决定当前是哪一种状态，一旦状态改变（从pending变为fulfilled和从pending变为rejected），就不会再变，任何时候都可以得到这个结果。这也是Promise这个名字的由来，它的英语意思就是“期约”，表示其他手段无法改变。

1.1.1 promise的状态是私有的

promise的状态是私有的，不能直接通过 JavaScript 检测到，也不能被外部 JavaScript 代码修改。

这主要是为了避免根据读取到的promise状态，以同步方式处理promise对象。
promise故意将异步行为封装起来，从而隔离外部的同步代码。

1.2 promise有什么？

想知道promise是什么，可以先console.dir(Promise)看它有什么。
如下： promise是一个构造函数，有all()方法、race()方法、rejected()方法、resolved()等方法方法。
原型链上有then()、catch()等方法。
在这里插入图片描述

1.3 resolve、rejected方法

promise实例对象中的一个属性『PromiseResult』
保存着异步任务『成功/失败』的结果。

resolve将Promise对象的状态从“未完成”变为“成功”在异步操作成功时调用，并将异步操作的结果，作为参数传递出去.
reject 将Promise对象的状态从“未完成”变为“失败”，将异步操作报出的错误，作为参数传递出去。

Promise.resolve 方法: (value) => {}
value: 成功的数据或 promise 对象
说明: 返回一个成功/失败的 promise 对象
5. Promise.reject 方法: (reason) => {}
reason: 失败的原因
说明: 返回一个失败的 promise 对象

1.4 then() 方法

then方法可以接受2个回调函数作为参数。

第一个回调函数是promise对象的状态变为resolved的时候调用，

第二个回调函数是promise对象的状态变为rejected时调用。

其中第二个函数是可选的，不一定需要提供。

这两个函数都接受Promise对象传出的值作为参数。

let p = new Promise((resolve , reject) => {
    fs.readFile('./resource/content.tx', (err, data) => {
        //如果失败了, 调用 reject(), 指定失败的 reason, 变为
rejected 状态
        if(err) reject(err);
        //如果成功了, 调用 resolve(), 指定成功的 value, 变为 resolved 状 态
        resolve(data);
    });
});

//调用 then 
p.then(value=>{
//成功的回调，得到成功的 vlaue
    console.log(value.toString());
}, reason=>{
//失败的回调, 得到失败的 reason
    console.log(reason);
});

1.4.1什么是回调地狱?

回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调函
数执行的条件。
回调地狱的缺点：不便于阅读 / 不便于异常处理。

1.4.2promise 链式调用解决回调地狱

/*
 回调地狱
*/
doSomething(function(result) {
	doSomethingElse(result, function(newResult) {
		doThirdThing(newResult, function(finalResult) {
			console.log('Got the final result: ' + finalResult)
		}, failureCallback)
	}, failureCallback)
}, failureCallback)
/*
 使用 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)
/*
  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) } }

1.5 catch() 方法

效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。

Promise.prototype.catch 方法: (onRejected) => {}
onRejected 函数: 失败的回调函数 (reason) => {}
说明: then()的语法糖, 相当于: then(undefined, onRejected)

1.6 Promise.all 方法

all 顾名思义，就是所有的意思，跟promise联合起来就是，所有的成功了，才算成功，只要有一个失败就是失败。
（大家好才是真的好！！！）

Promise.all 方法: (promises) => {}
(1) promises: 包含 n 个 promise 的数组
说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就
直接失败

1.7 Promise.race 方法

race 竞赛的意思，谁先执行完，它的状态就是最终状态。

Promise.race 方法: (promises) => {}
(1) promises: 包含 n 个 promise 的数组
说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

2. 用法

2.1promise基本用法

Promise 构造函数: Promise (excutor) {}
(1) executor 函数: 执行器 (resolve, reject) => {} 
(2) resolve 函数: 内部定义成功时我们调用的函数 value => {}
(3) reject 函数: 内部定义失败时我们调用的函数 reason => {}
说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行

2.1.1注意

先新建一个promise实例，用一个常量接受。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const p = new Promise((resolve, reject)=>{
            setTimeout(() => { 
              console.log('hhh')            
            }, 1000);
         });
    </script>
</body>
</html>

在这里插入图片描述

这时候我只是new了一个对象，但没有调用，打开控制台，它就已经帮我打印了hhh。

所以一般把它封装起来使用。比如封装Ajax。

2.2封装Ajax

/**
         * 封装一个函数 sendAJAX 发送 GET AJAX 请求
         * 参数   URL
         * 返回结果 Promise 对象
         */
        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);
                        }
                    }
                }
            });
        }
    
        sendAJAX('https://api.apiopen.top/getJok')
        .then(value => {
            console.log(value);
        }, reason => {
            console.warn(reason);
        });

3.几个要点

3.1如何改变 promise 的状态

(1) resolve(value): 如果当前是 pending 就会变为 resolved
(2) reject(reason): 如果当前是 pending 就会变为 rejected
(3) 抛出异常: 如果当前是 pending 就会变为 rejected

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

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

3.3 改变 promise 状态和指定回调函数谁先谁后

(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调

(2) 如何先改状态再指定回调?
① 在执行器中直接调用 resolve()/reject()
② 延迟更长时间才调用 then()

(3) 什么时候才能得到数据?
① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

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

(1) 简单表达: 由 then()指定的回调函数执行的结果决定
(2) 详细表达:
① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常
② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值
③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果

3.5 promise 如何串连多个操作任务

(1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用
(2) 通过 then 的链式调用串连多个同步/异步任务

3.6 promise 异常传透

(1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,
(2) 前面任何操作出了异常, 都会传到最后失败的回调中处理

3.7 中断 promise 链

(1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
(2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象

shakalaca

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6的promise（期约）

1. promise（期约）是什么？一种异步程序执行的机制。ECMAScript 6 新增的引用类型 Promise，可以通过 new 操作符来实例化。创建新期约时需要传入执行器（executor）函数作为参数。1.1 promise状态1.1.1 promise的状态是私有的promise的状态是私有的，不能直接通过 JavaScript 检测到，也不能被外部 JavaScript 代码修改。这主要是为了避免根据读取到的promise状态，以同步方式处理promise对象。promise故
复制链接

扫一扫