ECMAScript 6-promise学习与使用【es6含真实接口】

已于 2024-05-31 15:29:18 修改
阅读量5.4k 收藏 4
点赞数 2
分类专栏： JavaScript Vue 文章标签： javascript 前端 vue es6/es7 es6 ecmascript
于 2021-12-19 23:26:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42696432/article/details/122010569
版权

es6-promise学习与使用

es6-promise介绍与基本使用

promise是ES6引入的异步编程的新解决方案，语法上市promise是一个构造函数，用来封装异步操作并可以获取奇成功或失败的结果【解决回调地狱问题】

  1. Promise构造函数 ：Promise {excutor}{ }
  2. Promise.prototype.then方法
  3. Promise.prototype.catch方法

1. 实例化Promise对象
Promise对象有三个状态，初始化，成功，失败
实例化promise对象：

//实例化Promise对象【三个状态：初始化，成功，失败】
        const p = new Promise(function(resolve,reject){
            setTimeout(() => {
                let data = "数据库中的用户数据"
                //resolve调用
                resolve(data);
            }, 1000);
        });

调用成功和失败都会执行promise.then的方法，then的方法有两个参数，两个参数都是函数类型的值，每个函数都有一个形参，成功的执行then的第一个函数，失败的执行第二个执行参数，两个函数的形参分别是value和reason，成功的叫做value，失败的叫做reson。
调用then代码：

/*
	 调用成功，就会调用promise对象的then方法,
     then方法接受两个参数，
     两个参数都是函数类型的值，每个函数都有一个形参，成功的叫做value,失败的叫做reason
     调到resolve代表成功，读取状态成功，then就会执行第一个回调函数代码
     如果读取状态失败，调用带有
  */
p.then(
	   function(value){
         console.log(value);
       },
       function(reason){
	   }
)

成功调用输出：
promise实例化成功
读取失败的例子：

 const p = new Promise(function(resolve,reject){
            setTimeout(() => {
                //
                let data = "数据库中的用户数据"
                let err = "读取数据库失败"
                //resolve调用
                reject(err)
            }, 1000);
        });
        p.then(function(value){
            console.log(value);
        },function(reason){
            console.log(reason);
        })

promise实例化读取失败返回结果

es6-promise封装读取文件

原生js输出文件内容【请求文件内容属于异步】

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

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

效果：
js原生读取文件
使用promise封装读取文件：

//3.使用promise封装
const p = new Promise(function(resolve,reject){
    fs.readFile("./resources/1.md",(err,data)=>{
        //判断读取失败
        if(err) reject(err);
        //如果成功
        resolve(data)
    })
})
p.then(
    function(value){
        console.log(value.toString());
    },
    function(reason){
        console.log(reason);
    })

效果：
使用promise封装读取文件
使用promise封装读取文件

es6-promise封装Ajax请求

  1. 原生Ajax请求数据
 <script>
        //接口地址：https://api.apiopen.top/getJoke

        //创建对象
        const xhr = new XMLHttpRequest();

        //初始化
        xhr.open("GET","https://api.apiopen.top/getJoke");

        //发送
        xhr.send();

        //4.绑定时间，处理响应结果
        xhr.onreadystatechange = function(){
            //判断
            if(xhr.readyState === 4){
                //判断响应状态吗 200-299
                if(xhr.status >= 200 && xhr.status < 300){
                    //表示成功
                    console.log(xhr.response);
                }else{
                    //如果失败
                    console.log(xhr.status);
                }
            }
        }
    </script>

请求成功效果：
原生Ajax请求数据
请求失败结果：
原生Ajax请求数据
2. Promise进行封装Ajax代码

<script>
        //接口地址：https://api.apiopen.top/getJoke

        const p = new Promise((resolve,reject)=>{

        //创建对象
        const xhr = new XMLHttpRequest();

        //初始化
        xhr.open("GET","https://api.apiopen.top/getJoke");

        //发送
        xhr.send();

        //4.绑定时间，处理响应结果
        xhr.onreadystatechange = function(){
            //判断
            if(xhr.readyState === 4){
                //判断响应状态吗 200-299
                if(xhr.status >= 200 && xhr.status < 300){
                    //表示成功
                    resolve(xhr.response)
                }else{
                    //如果失败
                    reject(xhr.status);
                }
            }
        }
    });
    //指定回调
    p.then(
    function(value){
        console.log(value);
    },
    function(reason){
        console.log(reason);
    })
    </script>

成功效果：
Promise进行封装Ajax代码
失败效果：
Promise进行封装Ajax代码
处理方式不一样，原来是在回调函数里面处理成功和失败的结果，promise实在异步任务的后面通过then来指定回调，结构清晰，也不会产生回调地狱的问题。

es6-Promise.prototype.then方法

  1. then返回结果：返回结果是由执行函数的回调结果来决定的，如果回调函数中返回的结果是 ||promise类型的属性，状态为成功，返回值为对象的成功值。

  2. then返回非Promise对象

//创建promise对象
   const p = new Promise((resolve,reject)=>{
       setTimeout(()=>{
          //resolve("请求成功")
          reject("请求失败")
       },1000)
   });

   //调用 then方法
   const result = p.then(value =>{
       console.log(value);
       return value;
   },reason =>{
       console.log(reason);
       return reason;
   })
   console.log(result);

Promise.prototype.then方法返回结果
Promise.prototype.then方法返回结果
不写return返回undefined结果：
Promise.prototype.then方法返回结果
3. then返回Promise对象
then返回Promise对象，then中promise的状态就决定了then方法返回的一个对象的状态，then中Promise的失败就决定了then方法返回的一个失败的状态。

//创建promise对象
   const p = new Promise((resolve,reject)=>{
       setTimeout(()=>{
          resolve("请求成功")
          //reject("请求失败")
       },1000)
   });

   //调用 then方法
   const result = p.then(value =>{
       return new Promise((resolve,reject)=>{
           resolve('ok')
       })
   },reason =>{
       console.log(reason);
   })
   console.log(result);

then返回Promise对象
then返回Promise对象
4. then抛出错误
【如果抛出错误的话，这个状态也是一个失败的Promise状态，错误的值就是抛出的值】

//创建promise对象
   const p = new Promise((resolve,reject)=>{
       setTimeout(()=>{
          resolve("请求成功")
          //reject("请求失败")
       },1000)
   });

   //调用 then方法
   const result = p.then(value =>{
       //抛出错误
       throw new Error("出错啦")
   },reason =>{
       console.log(reason);
   })
   console.log(result);

效果：
then抛出错误
既然then的方法可以返回promise对象，所以说then方法可以链式调用，链式调用[then方法指定回调的时候是可以只指定一个的,可以通过链式调用来改变回调地狱的问题]
格式：

p.then(value=>{
    //异步任务
},reason=>{
 //异步任务
}).then(value=>{
     //异步任务
},reason=>{
 //异步任务
})

es6-promise实践练习-多个文件内容读取

        //回调地狱容易重名，很不容易被发现
  1. 使用回调地狱方式来做
//引入fs模块
const fs = require("fs")

fs.readFile('./resources/1.md',(err,data)=>{
    fs.readFile('./resources/2.md',(err,data1)=>{
        fs.readFile('./resources/3.md',(err,data2)=>{
            let result = data+"\r\n"+data1+"\r\n"+data2
            console.log(result);
        });
    });
});

上面代码可以发现 ，回调地狱容易重名，很不容易被发现。
Promise实现：

//使用promise来实现
const p = new Promise((resolve,reject)=>{
    fs.readFile("./resources/1.md",(err,data)=>{
        resolve(data);
    })
})
p.then(value=>{
    return new Promise((resolve,reject)=>{
        fs.readFile("./resources/2.md",(err,data)=>{
            resolve([value,data]);
        });
    });
}).then(value=>{
    return new Promise((resolve,reject)=>{
        fs.readFile("./resources/3.md",(err,data)=>{
            //压入
            value.push(data);
            resolve(value)
        });
    });
}).then(value=>{
    console.log(value.join('\r\n'));
})

promise实现多个文件内容读取

es6-Promise对象catch方法

catch用来指定promise失败的一个回调

第一种方式代码：

 <script>
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                //设置p对象的状态为失败，并且设置失败的值
                reject("出错啦")
            })
        })
        p.then(function(value){

        },function(reason){
            console.error(reason);
        })
    </script>

效果：
Promise中的catch方法

第二种方式代码：

<script>
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                //设置p对象的状态为失败，并且设置失败的值
                reject("出错啦")
            })
        })
        p.catch(function(reason){
            console.warn(reason);
        })
    </script>

Promise中的catch方法

完结

天生我材必有用_吴用
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECMAScript-6-7：ES6
02-20
**ECMAScript 6（简称ES6）是JavaScript语言的一个重大升级版本，它引入了许多新的特性和改进，显著提升了开发者的编程效率和代码质量。在本文中，我们将深入探讨ES6的关键特性，包括变量声明、模块系统、类与继承、...
promise-with-es6promise:Promise 示例与 ES6-Promise 一起使用
06-13
Promise的概念最早在ES6（ECMAScript 2015）中引入，而`es6-promise`库则是对原生Promise的一种补充和优化，确保在不支持Promise的旧版浏览器中也能使用。 Promise对象代表一个异步操作的最终完成或失败，并且可以...
【ES6】Promise 使用
zhenshu_guo的博客
01-25 1301
promise 基本使用与练习
ES6中的promise对象及其应用
l12345666777的博客
12-13 896
得到一个promise实例对象 所有实例请求成功或者所有实例都为fullfilled 实例才是fullfilled。resolve---promise实例状态为fullfilled执行回调函数--------请求成功执行回调函数。reject ---promise实例状态为rejected执行回调函数 ---------请求失败执行回调函数。2.fullfilled 已成功-------resolve。3.rejected 已失败---------reject。
ES6之Promise详解
最新发布
xllllll___的博客
05-24 669
1.语法：在语法上async/await提供了更简洁 ，更直观的一个语法，使异步代码更易读和维护。2.错误处理：在async/await中，可以直接使用try...catch来捕获异常,而在Promise中，则需要使用catch。3.代码流程：async/await可以使得异步代码看起来更像一个同步代码，易于阅读和理解。
JavaScript 之ES6
msn131420的博客
03-06 6604
一、ES6 简介 1.1什么是 ES6 ? ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。 ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。 1.2为什么使用 ES6 ? 每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。 变量提升特性增加了程序运行时的不可预测性 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码 二、ES6 的新增语法 2.1...
JavaScript高级——ES6基础入门
明哥
07-29 4364
ES6（ECMAScript 6），也被称为ES2015，是JavaScript的第六个版本.它于2015年发布，并在现代JavaScript开发中扮演了重要的角色.看千遍，不如自己动手写一遍遇到问题不要怕，微笑着面对它记笔记。
JavaScript 之 ES6 新特性
qq_48439911的博客
05-10 1767
模块化 Class类 Symbol 箭头函数 解构赋值 rest参数 set/map let/const 模板字符串 扩展运算符 迭代器/生成器
es6---Promise
muzidigbig的博客
10-20 4567
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大 回调函数 回调地狱 Promise.then()参数 Promise.all() Promise.allSettled() Promise.race() Promise.any() Promise.withPesolvers() Promise链中断方法 async/await Promise 高级用途的技巧
JavaScript之ES6
qq_54889094的博客
12-13 752
JavaScript之ES6
JavaScript --- ES6 涵盖（ES6 -- ES11）语法学习
02-24
从ES6（ECMAScript 2015）到ES11（ECMAScript 2020），JavaScript引入了一系列的新特性，极大地提升了代码的可读性和效率。本篇文章将深入探讨这些重要的语法更新。 一、箭头函数 ES6引入了箭头函数，其语法简洁...
es6-turkce-kaynaklar：ES6Türkçekaynak listesi
02-04
**ES6 Türkçe Kaynakları: ECMAScript 2015 Desteği ve Yeni Özellikler** ES6, yani ECMAScript 2015, JavaScript dilinin önemli bir güncellemesidir. Bu güncellemeler sayesinde geliştiriciler daha...
es6-notes：使用ECMAScript6的注意事项
02-05
**ES6，全称ECMAScript 6，是JavaScript语言的一个重大更新，引入了许多新特性，极大地提高了开发效率和代码质量。以下是一些在使用ES6时需要注意的关键知识点：** ### 1. **let和const命令** - `let`替代了`var`...
ES6详细介绍及使用
小仙儿
02-22 7020
ES6中的export和import介绍 一、ES6概念及发展史 1、ES6概念 WSC中：ECMAScript 6.0（以下简称ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了（所以也被叫作ES2015）。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 2、ES6发展史 版本 时间 描述 ECMA-262/ ...
JavaScript ES6标准
hj1214095082的博客
07-27 545
使用ES6的好处：1.方便 2.解决了JavaScript的遗留问题 1.新的变量声明方式 以往使用的var的缺点: ​ 1.可以重复声明 ​ 2.不能限制修改 ​ 3.没有块级作用域 ES6新特性：增加了let和const声明方式 let 声明变量 const 声明常量 let的用法： 禁止重复声明 let a = 5; let a...
ES6：Promise详解
DZQ1223的博客
06-27 5432
async 和 await 可以说是异步终极解决方案了，相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码，毕竟写一大堆 then 也很恶心，并且也能优雅地解决回调地狱问题。2）Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆。回调地狱：回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件。2）如果不设置回调函数，Promise内部抛出的错误，不会反映到外部。创造promise实例后，它会立即执行。
Es6 常见新特性 - JavaScript 中的语法糖
xaiobit_hl的博客
06-25 940
Es6 常见新特性 - JavaScript 中的语法糖
ES6---promise详解及用法
热门推荐
前端与计算机相关知识的分享，博主的qq523235674
01-29 2万+
一、什么是Promise Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配（ES8），但是它们是基于promise的)，从语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果。 二、为什么要使用promise 最重要也是最主要的一个场景就是ajax和axios请求。通俗来说，由于网速的不同，可能你得到返回值的时间也是不同的，但是我们下一步要执行的代码依赖于上一次请求返回值，这个时候我们就需要等待，结果出来了.
JavaScript-ES6
weixin_55088962的博客
06-22 792
JavaScript-ES6基本概念以及语法
深入理解ECMAScript 6：全面剖析ES6新特性
《ECMAScript 6 入门》是一本阮一峰编写的JavaScript语言教程，专注于介绍ECMAScript 6（ES6）中的新特性和语法变化。该书是根据作者的GitHub源代码以PDF形式编辑而成，便于学习者查阅和学习。内容涵盖了2017年2月22...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值