冇事来学系--Vue2.0中Promise详讲(下)

简介: then-fs的基本使用可以通过node下载then-fs。 npm install then-fs

then-fs的基本使用


可以通过node下载then-fs。 npm install then-fs

调用then-fs提供的readFile( ) 方法,可以异步读取文件的内容,它的返回值是一个Promise实例对象。因而可以调用.then( )方法为每个Promise异步操作指定成功和失败的回调函数

// 基于promise的方式读取文件
import thenFs from 'then-fs'        // 使用默认导入从then-fs中导入默认共享的成员用thenFs接收
thenFs.readFile('./files/1.txt', 'utf8').then(r1 => {console.log(r1)}, err1 => {console.log(err1.message)} )    // .then里面分别是成功和失败的回调函数,用r1接收读取的结果
thenFs.readFile('./files/2.txt', 'utf8').then(r2 => {console.log(r2)}, err2 => {console.log(err2.message)} )
thenFs.readFile('./files/3.txt', 'utf8').then(r3 => {console.log(r3)}, err3 => {console.log(err3.message)} )

注意:上述代码无法保证文件的读取顺序!(读取文件顺序与代码顺序不一致)


.then( )方法的特性


.then( )方法的返回值也是一个Promise对象,对象状态由回调函数的执行结果决定

  1. 若回调函数中返回的结果是 非Promise类型的数据,则.then()方法返回的promise对象状态为成功,且回调函数的返回值就是该对象的成功值
  2. 回调函数中无返回值,则默认返回的就是undefined,也是 非Promise类型的数据
  3. 若回调函数中返回的结果 是Promise类型的数据(Promise对象),则.then()返回的Promise对象的状态由 内部回调函数返回的Promise对象的状态决定,且成功的值或者失败的值也相同

使用下一个.then( )方法进行处理**。通过.then( )方法的链式调用,解决了回调地狱的问题 **

thenFs.readFile('./files/1.txt','utf8')     // 返回值是一个Promise对象
  .then((r1)=>{             // 通过.then()为第一个Promise实例指定成功之后的回调函数
    console.log(r1)
    return thenFs.readFile('./files/2.txt','utf8')    // 在第一个.then()中返回一个新的Promise对象
})
  .then((r2)=>{     // 继续调用.then()为上一个.then()的返回值指定成功之后的回调函数
    console.log(r2)
    return  thenFs.readFile('./files/3.txt','utf8')   // 第二个.then中返回另一个新的Promise对象
})
  .then((r3)=>{
    console.log(r3)
})


案例:同时读取多个文件(模拟多层嵌套的方式,实际上并不会这么写)

网络异常,图片无法展示
|

const fs = require('fs')
// 使用Promise实现
const p = new Promise((resolve, reject)=>{
  fs.readFile('./resources/为学.md', (err,data)=>{
    resolve(data)
  })
})
// 调用.then()方法时,失败的回调函数是可选的
p.then(value =>{      // 这里value就是上面读取为学.md的结果
  return new Promise((resolve, reject)=>{   // then里面返回一个新的Promise对象,防止读取第二个和第三个文件的时候产生回调地狱
    fs.readFile('./resources/插秧诗.md', (err,data)={  // 这里的data就是读取到的插秧诗.md的结果
      resolve([value, data])          // 把读取的两个内容进行合并,放在数组里继续向下传递
    })
  })
}).then(value => {                      // 这里的value就是接收上面两个文件合并的数组
    return new Promise((resolve, reject)=>{
      fs.readFile('./resources/观书有感.md', (err, data)=>{ // data是读取到的观书有感.md
        value.push(data)          // 将第三个读取的结果压入到数组中
        resolve(value)            // 将三个读取的数据合并的数组作为成功的值
      })
    })
  }).then(value =>{
    console.log(value.join('\r\n'))       // 将数组转化为字符串,\r\n就是回车,join(\r\n)就是以回车分隔
  })


通过.catch捕获错误


在Promise的链式操作中,如果出现了错误,可以使用Promise.prototype.catch方法进行捕获和处理

thenFs.readFile('./files/11.txt','utf8')      // 返回值是一个Promise对象
  .then((r1)=>{             // 通过.then()为第一个Promise实例指定成功之后的回调函数
    console.log(r1)
    return thenFs.readFile('./files/2.txt','utf8')    // 在第一个.then()中返回一个新的Promise对象
})
  .then((r2)=>{     // 继续调用.then()为上一个.then()的返回值指定成功之后的回调函数
    console.log(r2)
    return  thenFs.readFile('./files/3.txt','utf8')   // 第二个.then中返回另一个新的Promise对象
})
  .then((r3)=>{
    console.log(r3)
})
.catch((err)=>{
  console.log(err.message)    // 第一个文件不存在,则直接跳转到.catch(),后面的.then都不执行
})


  • 将.catch( )放在最后就会捕获到所有的错误
  • 如果不希望前面的错误导致后面的.then( )无法正常执行,则可以将.cacth( )的调用提前


Promise.all()方法


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

语法:promise.all( promises )

promises是包含n个promise对象的数组,该方法返回的是一个新的promise,只有所有的promise都成功才成功,只要有一个失败了就直接失败

网络异常,图片无法展示
|

p1, p2, p3都成功,所以result也是成功状态,且成功的值是三者的成功值组成的数组。

若有一个失败了,result就是失败状态,且失败的值就是对应的promise对象的失败值

Promise.race()方法

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

promise.race()方法返回一个新的promise,第一个完成的promise的结果状态就是最终的结果状态

目录
相关文章
|
前端开发 JavaScript 数据库
冇事来学系--Vue2.0中Promise详讲(上)
回调地狱 多层回调函数的相互嵌套,就形成了回调地狱
266 0
|
8天前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
16 1
|
8天前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
30 4
|
8天前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。
|
8天前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
8天前
|
前端开发 JavaScript UED
JavaScript中的异步编程和Promise
【2月更文挑战第3天】在Web开发中,JavaScript是一门非常重要的编程语言,而异步编程是JavaScript中的一个关键概念。本文将介绍JavaScript中的异步编程特点,以及如何使用Promise来更加优雅地处理异步操作,帮助开发者更好地理解和应用这一技术。
19 3
|
8天前
|
前端开发 JavaScript 数据处理
JavaScript中的异步编程及Promise对象
【2月更文挑战第3天】 传统的JavaScript编程模式在处理异步任务时常常会导致回调地狱和代码可读性较差的问题,而Promise对象的引入为解决这一问题提供了一种优雅的解决方案。本文将介绍JavaScript中的异步编程方式以及Promise对象的使用方法和优势,帮助读者更好地理解和运用异步编程技术。
22 8
|
8天前
|
前端开发 JavaScript
JavaScript中的异步编程与Promise
【2月更文挑战第1天】在Web开发中,JavaScript是一种常用的编程语言,而异步编程是其重要特点之一。本文将介绍JavaScript中的异步编程机制,探讨Promise对象的使用以及如何通过Promise处理异步操作,帮助读者更好地理解和应用JavaScript异步编程技术。
|
8天前
|
前端开发 JavaScript
JavaScript中的异步编程及Promise的应用
在前端开发中,异步编程是常见的需求,而Promise作为一种解决异步操作的技术,具有很高的应用价值。本文将介绍JavaScript中的异步编程原理,并结合实际案例详细讲解Promise的使用方法及其在前端开发中的应用。
14 2
|
8天前
|
前端开发 JavaScript
JavaScript 中的异步编程:Promise 和 Async/Await 的实现与应用
在Web开发中,JavaScript异步编程是一个不可忽视的重要话题。本文将深入探讨JavaScript中Promise和Async/Await的实现原理与应用场景,通过实例代码带您了解如何优雅地处理异步操作,提升代码的可读性和可维护性。