ES6-Promise简介

已于 2022-07-28 14:49:37 修改
阅读量374 收藏 2
点赞数
分类专栏： ES6 文章标签： javascript 前端 node.js
于 2022-05-16 08:14:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/124788934
版权

文章目录

Promise简介

Promise是ES6引入的异步编程的新解决方案，语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

promise的方法

  1. Promise构造函数: Promise (excutor)
  2. Promise.prototype.then方法
  3. Promise.prototype.catch方法
    eg：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        // 实例化Promise对象
        const p = new Promise(function (resolve,reject){
            setTimeout(function (){   
            let data = '数据库中的数据'
            resolve(data)//对象状态变成成功

          /*  let err = '数据读取失败'
            reject(err)//对象状态变成失败*/

            },1000)
           
        });

        // 调用promise对象的then方法，对应上面的resolve和reject
        p.then(function (value){
        // 状态是成功的时候调用该函数，即如果调用resolve就调用该函数 
        console.log(value)   
        },function (reason){
            // 状态失败调用该函数,即如果调用reject就调用该函数
           console.error(reason) 
        })

    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
Promise有3种状态:初始化完成、成功、失败

Promise封装读取文件

不使用Promise读取文件

// 1.引入fs模块
const fs = require('fs');

// 2.调用方法读取文件
fs.readFile('./resources/为学.md', (err, data) => {
    // 如果失败则抛出错误
    if (err) throw err;
    // 如果没出错则输出内容
    console.log(data.toString());
    
})

Promise封装读取文件

// 1.引入fs模块
const fs = require('fs');

// 2.调用方法读取文件
// fs.readFile('./resources/为学.md', (err, data) => {
//     // 如果失败则抛出错误
//     if (err) throw err;
//     // 如果没出错则输出内容
//     console.log(data.toString());
    
// })

// 3. 使用Promise封装
const p = new Promise(function (resolve, reject) {
    //读取文件是异步的 
    fs.readFile('./resources/为学.md', (err, data) => {
    // 如果失败则抛出错误
    if (err) reject(err);
    // 如果成功
        resolve(data);
})
   
})

p.then(function (value){
   // 如果没出错则输出内容
    console.log(value.toString());
},function (reason){
   console.log('读取失败')
})

在这里插入图片描述

使用promise封装AJAX请求

   <script>
        const p = new Promise((resolve,reject)=>{
            // Promise把AJAX请求包起来，看什么时候返回成功，什么时候返回失败


        // 1创建对象
        const xhr = new XMLHttpRequest()
        // 2初始化
        xhr.open('GET','https://api.apiopen.top/getJoke')
        // 3发送
        xhr.send()
        // 4绑定事件按，处理响应结果
        xhr.onreadystatechange = function (){
            //    判断
            if(xhr.readyState === 4){
                if(xhr.status>=200&&xhr.status<300){
                    // 表示成功
                   resolve(xhr.response) 

                }else{
                    reject(xhr.status)
                }
            }
        }

        })

        // 指定Promise的回调
        p.then(function (value){
           console.log(value)
        },function (reason){
           console.log(reason)
        })

    </script>

小结：Promise的优点

通过上述练习我们可以看出Promise的大致思路是，在Promise的构造函数中用resolve、reject指出成功和失败的地方，然后再Promise.prototype.then中指出成功和失败的回调函数。

所以使用Promise封装读取文件可以是代码结构更加清晰，减少代码缩进避免回调地狱，使代码更加精炼。

Promise.prototype.then方法

Promise.prototype.then方法的返回值

Promise.prototype.then方法的返回值也是一个Promise对象，它的状态由回调函数的执行结果决定：

  • 如果回调函数中返回的结果是非promise 类型的属性，它的状态为成功，并且它的值为该回调函数中返回的结果。
    eg：
    <script>
       // 实例化Promise对象
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{   
            // resolve('用户数据')
            reject('失败')
            },1000)   
        });

        const result = p.then(value=>{
        console.log(value) 
        return 123  
        },reason=>{
           console.error(reason) 
           return 456 
        })

        console.log(result)
        
    </script>

在这里插入图片描述

如果回调函数没有指定返回结果，那么默认值是返回undefine，不是Promise类型的，所以它的状态是成功
在这里插入图片描述

  • 如果回调函数中返回的结果是promise 类型的属性，它的状态为该返回Promise的状态，并且它的值为返回Promise的值（参数）。
    eg：
   <script>
       // 实例化Promise对象
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{   
            resolve('用户数据')
            // reject('失败')
            },1000)   
        });

        const result = p.then(value=>{
        console.log(value) 
        return new Promise((resolve,reject)=>{
            resolve('OK')
        }) 
        },reason=>{
           console.error(reason) 
           return 456 
        })

        console.log(result)
        
    </script>

eg：
在这里插入图片描述

  • 如果抛出错误，它的状态为失败，并且它的值为抛出来的值。
   <script>
       // 实例化Promise对象
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{   
            resolve('用户数据')
            // reject('失败')
            },1000)   
        });

        const result = p.then(value=>{
        console.log(value) 
         throw new Error('出错啦')
        },reason=>{
           console.error(reason) 
           return 456 
        })

        console.log(result)
        
    </script>

在这里插入图片描述

then的链式调用

  • 因为then的返回值有可能是Promise所以可以继续调用then，即链式调用。
    eg：
        p.then(
        value=>{},
        reason=>{}
        ).then(
        value=>{},
        reason=>{}
        )
  • then方法的回调函数中可以继续嵌套异步任务。

Promise解决回调地狱实例

实现多个文件读取：

  • 普通写法（出现回调地狱）
// 引入fs模块
const fs = require('fs')

fs.readFile('./resources/为学.md', (err, data1) => {
    fs.readFile('./resources/插秧诗.md', (err, data2) => {
        fs.readFile('./resources/观书有感.md', (err, data3) => {
            let result = data1 +'\n'+ data2 +'\n'+ data3
            console.log(result)
        })
    })
})

输出：
在这里插入图片描述

  • Promise实现
// 引入fs模块
const fs = require('fs')

const p = new Promise((resolve, reject) => {
    fs.readFile('./resources/为学.md', (err, data) => {
        resolve(data)
    })
})
p.then(value => {
    // value的值就是resolve或reject传过来的值
    return new Promise((resolve, reject) => {
        fs.readFile('./resources/插秧诗.md', (err, data) => {
            resolve([value,data])//返回的是 为学的data和插秧诗的data
        })
    })
}).then(value => {
    // 根据Promise的特性,此时.then,就是读取完插秧诗.then
    return new Promise((resolve, reject) => {
        fs.readFile('./resources/观书有感.md', (err, data) => {
            value.push(data)
            resolve(value)
        })
    })
}).then(value => {
    console.log(value.join('\n'))
})

输出：
在这里插入图片描述
优点：不会出现回调地狱

Promise的catch参数

用来指定promise的失败回调
eg：

        const p =new Promise((reslove,reject)=>{
            setTimeout(()=>{
                // 设置p对象
                reject('失败了')
            },1000)
        })

        p.catch(function (reason){
           console.log(reason)
        })
        /*等价于
        p.then(function (value){
           
        },function (reason){
           console.log(reason)
        })*/
_洋
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6 promise详解
qq_43955202的博客
12-03 875
ES6 Promise 1.什么是promise？ ES6 中一个非常重要和好用的特性就是Promise promise 到底是做什么的呢？ promise 是异步编程的一种解决方案。 那什么时候我们回来处理异步事件呢？ 1.一种很常见的场景就是网络请求 2.我们分装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4 = 7一样将结果返回。 3.所以我们往往会传入另外一个...
ES6 Promise 详解
Cyan_RA9的博客
10-21 1206
ES6新特性 Promise详解。
ES6之Promise详解
xllllll___的博客
05-24 603
1.语法：在语法上async/await提供了更简洁 ，更直观的一个语法，使异步代码更易读和维护。2.错误处理：在async/await中，可以直接使用try...catch来捕获异常,而在Promise中，则需要使用catch。3.代码流程：async/await可以使得异步代码看起来更像一个同步代码，易于阅读和理解。
【ES6】Promise 使用
zhenshu_guo的博客
01-25 1296
promise 基本使用与练习
es6新增-Promise详解(异步编程的解决方案1)
m0_65912225的博客
08-02 982
Promise实例的状态 (!important) 1.每个Promise实例有三种状态，分别是 pending(进行中)，fulfilled(已成功)，rejected(已失败) 创建时候的默认状态是pending，只有异步操作的结果，可以决定当前是哪一种状态，任何操作都无法改变这个状态。这也是Promise名字的由来。 2.一旦状态改变(确定)，就不会再变了，Promise对象的状态改变，只有两种可能： a.从pending变为fulfilled b.从penging变为rej......
ES6 Promise用法小结
热门推荐
涂涂
07-25 38万+
目录 1.什么是Promise reject的用法 catch的用法 all的用法 race的用法 1.什么是Promise Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。 Promise对象有以下两个特点。 （1）对象的状态不受外界影响。Promise对象代表一个异步操...
es6-promise
04-02
es6-promise.auto.js ,可用于微信小程序开发，小程序里需要
es6-promise.auto.js
10-31
<!-- Automatically provides/replaces `Promise` if missing or broken. --> [removed][removed] ...-- Minified version of `es6-promise-auto` below. --> [removed][removed] [removed][removed]
es6-promise@4.1.1.zip
06-18
**ES6 Promise 深入理解与应用** 在JavaScript中，由于其单线程的特性，同步执行的代码会按照顺序依次处理，这在处理I/O密集型任务时容易导致阻塞，使得用户界面无法及时响应。为了解决这个问题，Promise（承诺）...
前端开源库-es6-promise-pool
08-29
const PromisePool = require('es6-promise-pool'); // 假设我们有100个需要下载的文件 const filesToDownload = Array.from({ length: 100 }, (_, i) => `file${i + 1}.txt`); // 每个文件的下载是一个返回...
es6-promise.js
09-10
一个轻量级库，提供用于组织异步代码ES6 Promis(subset of rsvp.js) , 在ES5中支持Promise
小程序用es6 promise
04-02
小程序引用es6 promise,亲测，请大家下载，放心使用，谢谢！
ES6中关于Promise的所有知识点！！！快看快看
2301_76766756的博客
08-18 225
---异步(Asynchronous, async)和同步(Synchronous, sync)；----异步按照代码的顺序执行，异步不按照代码的顺序执行，异步的执行效果更佳；
【React系列】ES6学习笔记（二）Promise、async\await
川峰的博客
01-05 1825
本文参考自电子书《ECMAScript 6 入门》：https://es6.ruanyifeng.com/ Promise 对象 1. Promise 的含义 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。 所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以
ES6的promise详解
Crystal的博客
10-16 251
promise指的是异步操作的回调函数。它实质上是一个构造函数，自己身上有all、reject、resolve这几个的方法，原型上有then、catch等同样很眼熟的方法。 1、那就new一个： //用一个函数包裹promise对象，如果不包裹起来，会自动执行对象里的定时器 var runAsync1 = function () { let p = new Promise(funct...
es6的promise笔记
风小白的博客
07-12 581
说明：看了promise的自己一笔记，本文档主要是记录一些遇到的难点，自己查阅资料理解的过程参考文档1、阮一峰es6入门2、姜方鑫 对promise的理解一、Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是...
ES6中的Promise
q709971076的博客
06-21 89
小编在项目中遇到这样的需求，就是很多个异步请求，下一个请求依赖上一个请求的请求结果，这个时候，在es5中的解决方案就是不停的在上一个请求成功的时候，根据返回值 ，再进行请求。倒是也能解决需求，但是写代码的时候，就会写成这样：大家还可以关注我的wei xi ...
简单理解ES6的Promise
许小叮当的博客
05-18 658
简单理解ES6的Promise 文章目录简单理解ES6的Promise前言Promise怎么用ES7的async和await总结 前言 Promise是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间就会给你一个结果 Promise可以保证异步请求变得有顺序执行 概念：Promise是ES6中的新语法，本身是一个构造函数；每个new出来的Promise实例对象，都代表一个异步操作 作用： 解决了回调地狱问题(
【Es6中的promise】
YcintaL0203的博客
08-03 193
文章简单的介绍了es6中的promise是什么，用什么作用，怎么使用的以及它的三种状态，和它的all和race的方法，最后简单的概括了Promise与async/await有什么区别提示：以下是本篇文章正文内容，下面案例可供参考。...
es6-promise依赖下载
最新发布
06-09
ES6-Promise是一个用于在JavaScript中实现Promise功能的库，它为浏览器和Node.js环境提供了对Promise规范的支持，特别适用于那些不直接支持ES6 Promise特性的环境。它解决了早期浏览器对Promise的不完全支持问题。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值