ES6-Promise简介

已于 2022-07-28 14:49:37 修改
阅读量376 收藏 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
    评论
专栏目录
【JS】ES6-Promise
m0_50947589的博客
06-20 457
Promise 是异步编程的一种解决方案： 从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。 promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。promise是用来解决两个问题的：回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象，提高代码的可读性。promise可以支持多个并发的请求，获取
es6-promise
04-02
es6-promise.auto.js ,可用于微信小程序开发，小程序里需要
ES6-Promise
weixin_60934893的博客
05-05 624
Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。1) Promise构造函数方法方法代码解析：resolve ，reject参数是默认参数，可以改，但一般就按这两个参数走。resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise。
ES6------promise详解
weixin_40381947的博客
04-06 989
1.promise其实就是一个对象或者说是构造函数2.promise的出现（es6） 就是解决异步编程和回调地狱等问题，async和await的出现（ES8）就是基于promise的一种解决异步编程的终极解决方案（简化代码等等）3.在前端中，ajax和axios都会用到异步编程，axios更是基于promise的，所以一定要掌握promise以及用async和await搭配promise的使用。
ES6之Promise详解
xllllll___的博客
05-24 724
1.语法：在语法上async/await提供了更简洁 ，更直观的一个语法，使异步代码更易读和维护。2.错误处理：在async/await中，可以直接使用try...catch来捕获异常,而在Promise中，则需要使用catch。3.代码流程：async/await可以使得异步代码看起来更像一个同步代码，易于阅读和理解。
ES6--Promise
m0_59359854的博客
07-19 320
它的作用是为Promise实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数，参数可选。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。Promise.prototype.catch()方法是.then(null,rejection)或.then(undefined,rejection)的别名，用于指定发生错误时的回调函数。...
es6---Promise
muzidigbig的博客
10-20 4648
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大 回调函数 回调地狱 Promise.then()参数 Promise.all() Promise.allSettled() Promise.race() Promise.any() Promise.withPesolvers() Promise链中断方法 async/await Promise 高级用途的技巧
推荐使用：ES6-Promise —— 轻量级的Promise库
gitblog_00028的博客
05-11 285
推荐使用：ES6-Promise —— 轻量级的Promise库 项目地址:https://gitcode.com/stefanpenner/es6-promise 1、项目介绍 ES6-Promise 是一个对ECMAScript 6规范中Promise实现的轻量级库，它是来自rsvp.js的一个子集。这个库提供了基本的Promise功能，并且易于集成到你的项目中。如果你需要额外的功能和更详尽的...
ES6---promise详解及用法
热门推荐
前端与计算机相关知识的分享，博主的qq523235674
01-29 2万+
一、什么是Promise Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配（ES8），但是它们是基于promise的)，从语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果。 二、为什么要使用promise 最重要也是最主要的一个场景就是ajax和axios请求。通俗来说，由于网速的不同，可能你得到返回值的时间也是不同的，但是我们下一步要执行的代码依赖于上一次请求返回值，这个时候我们就需要等待，结果出来了.
ES6 - Promise详解及用法
Cc200171的博客
06-15 9351
1.promise的实例方法 案例 目标：拿到关于 狙击手 电影的描述 过程： 1.先登录 2.请求 导演信息 找到张导的id 3.请求 电影信息 找到描述 2.promise的对象方法(p1,p2,p3为promise的实例对象) ①Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果 ②Promise.race() 并发处理多个异步任务，只要有一个任务完成就能得到结果...
【Promise入门篇】JS--ES6--promise对象详解和基本使用(含代码)
xuxuii的博客
06-22 2847
抽象表达：① Promise是一门新的技术（ES6规范）② Promise是JS中进行的新解决方案备注：旧方案是单纯使用回调函数： 具体表达：① 从语法上来说：Promise是一个 ② 从功能上来说：Promise对象用来封装一个，并可以获取其成功/失败的结果值旧的: 必须在启动异步任务前指定promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)什么是回调地狱?回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套......
ES6 - Promise执行顺序
weixin_46945750的博客
07-17 144
【代码】ES6 - Promise执行顺序。
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
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 634
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1292
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 250
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
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、付费专栏及课程。

余额充值