冇事来学系--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详讲(上)
回调地狱 多层回调函数的相互嵌套,就形成了回调地狱
308 0
|
6月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
66 1
|
6月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
99 4
|
6月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。
|
5月前
|
前端开发 JavaScript 开发者
JavaScript进阶-Promise与异步编程
【6月更文挑战第20天】JavaScript的Promise简化了异步操作,从ES6开始成为标准。Promise有三种状态:pending、fulfilled和rejected。基本用法涉及构造函数和`.then`处理结果,如: ```javascript new Promise((resolve, reject) => { setTimeout(resolve, 2000, '成功'); }).then(console.log); // 输出: 成功
89 4
|
6月前
|
JSON 前端开发 JavaScript
【JavaScript技术专栏】JavaScript异步编程:Promise、async/await解析
【4月更文挑战第30天】JavaScript中的异步编程通过Promise和async/await来解决回调地狱问题。Promise代表可能完成或拒绝的异步操作,有pending、fulfilled和rejected三种状态。它支持链式调用和Promise.all()、Promise.race()等方法。async/await是ES8引入的语法糖,允许异步代码以同步风格编写,提高可读性和可维护性。两者结合使用能更高效地处理非阻塞操作。
97 0
|
4月前
|
前端开发 JavaScript
JavaScript异步编程:Promise与async/await的深入探索
【7月更文挑战第9天】Promise和async/await是JavaScript中处理异步编程的两大利器。Promise为异步操作提供了统一的接口和链式调用的能力,而async/await则在此基础上进一步简化了异步代码的书写和阅读。掌握它们,将使我们能够更加高效地编写出清晰、健壮的异步JavaScript代码。
|
4月前
|
前端开发 JavaScript 定位技术
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
61 1
|
5月前
|
前端开发 JavaScript
Promise是JavaScript解决异步问题的构造器,代表未来的不确定值。
【6月更文挑战第27天】Promise是JavaScript解决异步问题的构造器,代表未来的不确定值。它避免了回调地狱,通过链式调用`.then()`和`.catch()`使异步流程清晰。
50 2
|
5月前
|
前端开发 JavaScript
JavaScript异步处理避免了单线程阻塞,如回调函数、Promise和async/await。
【6月更文挑战第22天】JavaScript异步处理避免了单线程阻塞,如回调函数、Promise和async/await。回调是基础,用于在操作完成后执行函数;Promise管理异步状态,支持链式调用;async/await提供同步代码外观,简化错误处理。每种技术在处理耗时任务时都起着关键作用。
53 3

热门文章

最新文章