ES6（四）Promise的理解与使用

最新推荐文章于 2024-06-03 13:50:10 发布
最新推荐文章于 2024-06-03 13:50:10 发布
阅读量195 收藏
点赞数 1
分类专栏： ES6教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/literarygirl/article/details/86165829
版权
一、什么是Promise?

Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象（Promise对象是一个构造函数，用来生成Promise实例），从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。

Promise 不解决异步问题，解决的是异步的写法

二、语法

new Promise( function(resolve, reject) {...} /* executor */ );

let p = new Promise(function(resolve,reject){
    // 这个函数会被 Promise
    setTimeout(()=>{
        resolve("传参");// 当我们调用了 resolve 就代表该异步完成，并且成功拿到结果
    },2000);
});
p.then(function(res){
    console.log(res);//传参
});
三、参数 executor

executor是带有 resolve 和 reject 两个参数的函数 。
Promise构造函数执行时立即调用executor 函数， resolve 和 reject 两个函数作为参数传递给executor（executor 函数在Promise构造函数返回新建对象前被调用）。
resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）。
executor 内部通常会执行一些异步操作，一旦完成，可以调用resolve函数来将promise状态改成fulfilled，或者在发生错误时将它的状态改为rejected。
如果在executor函数中抛出一个错误，那么该promise 状态为rejected。executor函数的返回值被忽略

let p = new Promise(function(resolve,reject){
    let img = new Image();
    img.src = `https://timgsa.babidu.com/timg?image&quality=80&size=b9999_10000&sec=1576855691894&di=b694b104df1eb0b53ee6b52d8ad6fb49&imgtype=0&src=http%3A%2F%2Fpic.vjshi.com%2F2018-10-30%2F26b945dcada739a37b4d1fecc1d10abb%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark`;
    img.onload = function(){
        resolve("图片请求成功")
    };
    img.onerror = function(){
        reject("图片请求失败");
    };
}).then((res)=>{
    console.log(res);
},(rej)=>{
    console.log(rej);
});
四、then
promise.then(onFulfilled,onRejected)

参数：

  • onFulfilled
    当Promise变成接受状态（fulfillment）时，该参数作为回调函数被调用（参考： Function）。该函数有一个参数，即接受的最终结果（the fulfillment value）。如果传入的 onFulfilled 参数类型不是函数，则会在内部被替换为(x) => x ，即原样返回 promise 最终结果的函数
  • onRejected
    当Promise变成拒绝状态（rejection ）时，该参数作为回调函数被调用（参考： Function）。该函数有一个参数,，即拒绝的原因（the rejection reason）。
 new Promise(promise的回调函数，在实例化时会直接执行function(resolve,reject){
        // resolve 调用该 函数 resolve(传递给成功的执行函数的数据) 代表异步执行完成，
        并成功拿到结果
        // reject 调用该函数 reject(传递给处理失败的执行函数的数据) 代表异步执行完成，
        但是没有成功拿到结果
    }).then((成功之后传递过来的数据)=>{
        console.log("成功之后的业务处理");
    },(失败之后传递过来的数据)=>{
        console.log("失败之后的业务处理");    
    });

Promise 的then方法会返回一个新的Promise对象

五、描述

Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象一个 Promise有以下几种状态:

  • pending: 初始状态，既不是成功，也不是失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。
六、 链式操作的用法

Promise 的 then 方法，会给我们返回一个新的 Promise 对象
新的 Promise 对象的执行状态:

  1. 默认情况下: then 返回的是一个状态是 resolved 的 Promise 对象
  2. 当then的回调函数返回的是一个 非 Promise 对象，then 返回的是一个状态是 resolved 的 Promise 对象
  3. 当 then 的回调函数返回的是一个 Promise 对象，then 返回值，也会变成该 Promise 对象
let p = new Promise((resolve,reject)=>{
    resolve(1);
});    

let p2 = p.then((data)=>{
    console.log("resolve");
    return new Promise((resolve,reject)=>{
        //reject("1");
    });
},(data)=>{
    console.log("reject");  
});

p2.then((data)=>{
    console.log("p2的resolve");
},(data)=>{
    console.log("p2的reject");
});

基于链式操作的demo示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div id="box"></div>    
<script>
/*
    el 元素
    attr 样式
    val 目标点
    cb 动画结束之后，要做的事情

    如果目标值 比 当前值大 ，返回一个正数，否则返回一个 负数
*/    
function move(el,attr,val){
    let now = parseFloat(getComputedStyle(el)[attr]);
    let speed = val>now?1:-1;
    return new Promise((resolve)=>{
        clearInterval(el.timer);
        el.timer = setInterval(() => {
            if(Math.abs(now - val) <= 0 ){
                clearInterval(el.timer);
                resolve();
            } else {
                now += speed;
                el.style[attr] = now + "px";
            }
        }, 16);
    }); 
}
{
    let box = document.querySelector("#box");
    function boxMove(){
        move(box,"left",200).then(()=>{
            return move(box,"top",200);
        }).then(()=>{
            return move(box,"left",0);
        }).then(()=>{
            return  move(box,"top",0);
        }).then(()=>{
            boxMove()
        });
    }
    boxMove();
}
</script>    
</body>
</html>

实际工作中promise用域接口请求的实例

new Promise((resolve)=>{
    // 请求接口拿到数据
    setTimeout(()=>{
        let data = {
            state: 200, 
            isState:"ok",
            data: {
                code: 1
            }
        }
        resolve(data);
    },100);
}).then((data)=>{
    // if(data.state == 200){

    // }
    return data.data;
}).then((data)=>{
    console.log(data);
});
七、Promise 的其他用法

1.Promise.reject

Promise.reject(reason) 返回一个状态为 Rejected 的 Promise 对象

参数：
reason 失败原因

2.Promise​.resolve

Promise.resolve(value) 返回一个状态为 resolved 的 Promise 对象

参数：value 将被Promise对象解析的参数

3.Promise​.catch

捕获前一个promise抛出的错误

new Promise((resolve,reject)=>{
    reject(1);
}).then(()=>{
    console.log(1);
    return Promise.reject() // 不需要处理异步的业务，直接返回一个 reject 状态的 Promise 对象
}).then(()=>{
    console.log(2);
}).catch((err)=>{ // 捕获 前边的 Promise 中出的错误
    console.log("出错了",err);
});

4.Promise​.all

Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例，当所有Promise都成功的时候，整个Promise.all才成功

5.Promise.race

与Promise.race方法类似将多个promise包装成一个新的promise实例
但是其中有一项的状态发生改变新的实例的状态就会随着改变

let p = new Promise((resolve)=>{
    setTimeout(()=>{
        console.log(1);
        resolve();
    },10);
});
let p2 = new Promise((resolve)=>{
    setTimeout(()=>{
        console.log(2);
        resolve();
    },1000);
});
let p3 = new Promise((resolve)=>{
    setTimeout(()=>{
        console.log(3);
        resolve();
    },3000);
});
// Promise.all([p,p2,p3]).then(()=>{
//     console.log(4);
// });
Promise.race([p,p2,p3]).then(()=>{
    console.log(4);
});
八、async函数

只要函数名之前加上async关键字，就表明该函数内部有异步操作。
该异步操作应该返回一个Promise对象，前面用await关键字注明。
当函数执行的时候，一旦遇到await就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句

async函数其实是在Promise 的基础上对异步方法的改写的一个新的方案

没有使用async 的Promise，如果业务需求复杂的时候，代码看起来非常冗余

new Promise((resolve)=>{
    setTimeout(()=>{
        console.log(1);
        resolve();
    },1000);
}).then(()=>{
    return new Promise((resolve)=>{
        setTimeout(()=>{
            console.log(2);
            resolve();
        },1000);
    });
}).then(()=>{
    return new Promise((resolve)=>{
        setTimeout(()=>{
            console.log(3);
            resolve();
        },1000);
    });
}).then(()=>{
    console.log("执行完成")
});

使用async 之后，看起来会稍微好点

async function fn(){
    try{
        
        let n1 = await new Promise((resolve)=>{
            setTimeout(()=>{
                console.log(0);
                resolve(1);
            },1000);
        });
        let n2 = await new Promise((resolve)=>{
            setTimeout(()=>{
                console.log(n1);
                resolve(2);
            },1000);
        });
        let n3 = await new Promise((resolve)=>{
            setTimeout(()=>{
                console.log(n2);
                resolve(3);
            },1000);
        });
        console.log(n3);

    }catch(err){
        console.log(err);
    }
}
fn();

扩展
回调地狱

  • 封装简易运动框架
  • 最早我们处理异步消息通知，都是通过回调来处理的，但是回调多了，代码的结构就必然嵌套层级特别多，造成可读性和维护性的直线下降 - 这就是回调地狱
cdwhy
关注
专栏目录
ES6的Promise详解
程序员柒的博客
11-08 5781
本篇文章主要介绍了ES6语法中的Promise对象的使用详解,promise对象是JS进阶学习中的重要知识点，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力，先赞后看养成习惯。以下是本篇文章正文内容。
【JS】ES6-Promise
m0_50947589的博客
06-20 498
Promise 是异步编程的一种解决方案： 从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。 promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。promise是用来解决两个问题的：回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象，提高代码的可读性。promise可以支持多个并发的请求，获取
ES6———promise详解及用法。
zhang_mou_r的博客
06-01 1075
1.promise其实就是一个对象或者说是构造函数。2.promise的出现（es6） 就是解决异步编程和回调地狱等问题，async和await的出现（ES8）就是基于promise的一种解决异步编程的终极解决方案。3.在前端中，ajax和axios都会用到异步编程，axios更是基于promise的，所以一定要掌握promise以及用async和await搭配promise的使用。
ES6 之 Promise用法
Hy_0452的博客
03-04 974
1. 为什么使用Promise 解决回调函数中嵌套函数(回调地狱) 2.Promise的基本使用 Promise是一个构造函数，通过new关键字实例化对象 语法 new Promise((resolve， reject) =>{}) Promise接受一个函数作为参数 在参数函数中接收两个参数 resolve：成功函数 reject：失败函数 promise实例有两个属性 state: 状态 result: 结果 1）promise的状态 第一种状态：pending(准备，待
ES6-Promise介绍与基本使用_异步编程新的解决方案
最新发布
Aaron_杀死庸碌的博客
06-03 189
ES6-Promise介绍与基本使用 1. 写法：实例化 Promise 他有个参数，参数就是一个函数，这个函数还有两个形参：resolve，reject。 2. 通过 resolve，reject 这两个参数可以改变这个 Promise 对象的状态， 1）第一个参数(resolve)：标志着成功，成功后会调用下面的 .then 方法，里面的第一个函数。 2）这个 then 方法里面也有两个参数，两个参数就是两个函数： (这个then必须写，才能接收到成功失败的回调
ES6 之Promise的使用
m0_48982503的博客
12-03 592
(一) Promise promise是承诺，允诺的意思。(是将来发生的事) (1) Promise是什么？ 从用途上来说： (1) promise主要用于异步计算。 (2) 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。 (3) 可以在对象之间传递和操作promise，帮助我们处理队列。 从语法上说： Promise 是一个对象，从它可以获取异步操作的消息。 Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理 executor是执行器，执行者的意
深入理解ES6 Promise 扩展always方法
08-29
本文将详细介绍ES6 Promise 扩展always方法的使用方法和优点，并对其与其他Promise方法的区别进行比较。 一、ES6 Promise 的缺陷 在ES6中，Promise对象提供了then和catch两个方法，分别用于处理成功和失败的结果。...
es6-promise@4.1.1.zip
06-18
**ES6 Promise 深入理解与应用** 在JavaScript中，由于其单线程的特性，同步执行的代码会按照顺序依次处理，这在处理I/O密集型任务时容易导致阻塞，使得用户界面无法及时响应。为了解决这个问题，Promise（承诺）...
前端项目-es6-promise.zip
09-02
`Promise.race()`方法与`Promise.all()`类似，但只要有任何一个输入的Promise被解决或拒绝，它就会立即解决或拒绝。 ```javascript const promises = [promise1, promise2, promise3]; Promise.race(promises) ....
ES6 Promise对象概念与用法分析
12-10
本文实例讲述了ES6 Promise对象概念与用法。分享给大家供大家参考，具体如下： 1.Promise概念 Promise 对象有三种状态： ① Fulfilled 可以理解为成功的状态 ② Rejected 可以理解为失败的状态 ③ Pending 既不是 ...
ES6. Promise理解与用法详解
zhang1339435196的博客
09-27 571
浏览器的运行是靠几个进程相互配合工作的，JS引擎是浏览器渲染进程中的一个线程，它属于单线程，一次只能执行一个任务，如果有多任务则需要排队等待被执行，如需要执行异步操作就需要借助浏览器的其他线程完成，异步执行完成后将回调函数推送至任务队列中，待同步任务执行完毕后，再从任务队列中取出异步回调方法执行。任务队列中还可分为宏任务和微任务，如果宏任务中有微任务，那么当执行完宏任务，就立即执行微任务，然后才是...
ES6新语法之Promise
weixin_49734970的博客
07-25 84
111。
【es6】 教程 Promise使用
weixin_44899940的博客
08-22 276
【es6】 教程 Promise使用
ES6新增语法(五)——Promise详解
2401_83704125的博客
03-29 1005
)then方法======then方法接收两个参数作为参数，第一个参数是Promise执行成功时的回调，第二个参数是Promise执行失败的回调，两个函数只会有一个被调用。通过.then添加的回调函数，不论什么时候，都会被调用，而且可以添加多个回调函数，会一次按照顺序并且独立运行。resolve(“成功”)})console.log(res)//返回成功},(err)=>{})带有多个回调函数时resolve(1)})})catch用法=======
ES6 实用的promise的用法与杂谈
chunxue8373的博客
09-16 104
1.通俗点说，promise就是一种异步操作的解决方案，说起异步操作，那有必要先讲讲“同步”和“异步”的概念。 1.1 同步： 举个例子，比如中午做饭，先淘米，等饭熟了，然后炒菜，等菜熟了再把衣服丢经洗衣机里去洗衣服，就是说你在等一件事完成后，你才开始做下一步的事...
ES6 Promise用法总结
Potry Code的博客
02-08 1410
目录：一、Promise概述二、使用Promise的好处三、Promise基本用法四、基于Promise发送Ajax请求五、Promise 基本API实例方法.then().catch().finally()静态方法.all().race() 一、Promise概述 简单的来讲，Promise就是异步编程的一种解决方案。从语法上讲，Promise是一个对象，从它可以获取到异步操作的消息。 二、使...
ES6-Promise
weixin_60934893的博客
05-05 664
Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。1) Promise构造函数方法方法代码解析：resolve ，reject参数是默认参数，可以改，但一般就按这两个参数走。resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise。
关于Promise的一些理解
星环
11-27 429
关于Promise 一个 Promise 必然处于以下几种状态之一： pending: 初始状态，既没有被兑现，也没有被拒绝。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。 Promise 对象是由关键字 new 及其构造函数来创建的。该构造函数会把一个叫做“处理器函数”（executor function）的函数作为它的参数。这个“处理器函数”接受两个函数——resolve 和 reject ——作为其参数。 const p = new Promise((resol
Promise 的使用 以及 async ， await ，Promise.all 使用方法
q515656712的博客
03-05 5612
代码 是直接拷贝 项目中写的 没有做简化 许多内容 是调用 项目中的数据 可以忽略掉 1.代码中 uploadSectionFile()是封装的 上传图片到阿里云的一个公用方法，其结果 用 Promise 返回 代码示例： Vue.prototype.uploadSectionFile = function (key, fileList) { return new Pr...
ES6 Promise使用详解与实例分析
本文将详细介绍Promise在ES6中的使用方法及其关键特性。 1. **Promise的基本概念** - Promise是一个构造函数，用来创建Promise对象。它代表了一个异步操作的最终完成（fulfilled）或失败（rejected）状态。 - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值