IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> promise -> 正文阅读

[JavaScript知识库]promise

1、回调地狱

多层回调函数相互嵌套就形成了回调地狱。

缺点:

  • 代码耦合性太强,牵一发而动全身,难以维护
  • 大量冗余的代码相互嵌套,代码的可读性变差

1.1、如何解决回调地狱的问题

为了解决回调地狱的问题,ES6(ECMAScript 2015)中新增了 Promise 的概念

?

1.2、promise的基本概念

1、promise是一个构造函数

  • 可创建promise的实例 const p = new Promise
  • new出来的promise实例对象代表一个异步操作

2、 promise.prototype上包含一个.then()方法

  • 每一次new promise()构造函数得到的实例对象都可以通过原型链的方式访问到.then()方法

3、.then()方法用来预先指定成功和失败的回调函数?

  • p.then(成功的回调函数,失败的回调函数)?
  • p.then(result => {} ,error => {})
  • 调用.then()方法时,成功的回调函数是必选的,失败的回调函数是可选的

2、基于 then-fs 读取文件内容

由于 node.js 官方提供的 fs 模块仅支持以回调函数的方式读取文件,不支持 Promise 的调用方式。因此,需要先运行 npm i then-fs?命令,安装 then-fs 这个第三方包,从而支持我们基于 Promise 的方式读取文件的内容

2.1、.then() 方法的特性

如果上一个 .then() 方法中返回了一个新的 Promise 实例对象,则可以通过下一个 .then() 继续进行处理。通过 .then() 方法的链式调用,就解决了回调地狱的问题。

2.2、基于 Promise 按顺序读取文件的内容
Promise 支持链式调用,从而来解决回调地狱的问题
fn(path.join('/files/1.txt','utf8'))
.then((res) => {
    console.log(res);
    return fn(path.join('/files/2.txt','utf8'))
}).then((res) => {
    console.log(res);
    return fn(path.join('/files/3.txt','utf8'))
}).then((res) => console.log(res))

2.3、通过 .catch 捕获错误

在 Promise 的链式操作中如果发生了错误,可以使用 Promise.prototype.catch 方法进行捕获和处理
如果不希望前面的错误导致后续的 .then 无法正常执行,则 可以将 .catch 的调用提前
fn(path.join('/files/1.txt','utf8'))
.catch(err=>{
console.log(err.message);
})
.then((res) => {
    console.log(res);
    return fn(path.join('/files/2.txt','utf8'))
}).then((res) => {
    console.log(res);
    return fn(path.join('/files/3.txt','utf8'))
}).then((res) => console.log(res))
2.4 ?Promise.all() 方

promise.all()方法会发起并行的Promise异步操作,等所有的异步操作结束之后才会执行下一步的.then操作(等待机制)。

import thenFs from 'then-fs'

const promiseArr = [
    thenFs.readFile('./files/1.txt', 'utf8'),
    thenFs.readFile('./files/2.txt', 'utf8'),
    thenFs.readFile('./files/3.txt', 'utf8')
]
Promise.all(promiseArr).then(([r1, r2, r3]) => {
    console.log(r1, r2, r3)
})

2.5?Promise.race() 方

promise.race会发起并行的promise异步操作,只要任何一个异步操作完成,就会立即执行下一步的.then操作(赛跑机制)。

3、封装一个自己的promise函数

import fs from 'fs'

function getFile(fpath) {
    return new Promise(function (resolve,reject) {
        fs.readFile(fpath, 'utf8', (err, data) => {
            if (err) return reject(err)
            resolve(data)
    })
    })
}
getFile('./files/1.txt').then((r1)=>{console.log(r1)},(err)=>{console.log(err.message)})

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-20 12:24:14  更:2021-10-20 12:24:42 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/12 23:33:43-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码