import thenFs from 'then-fs'

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

注: 上記のコードは、ファイルが読み取られる順序を保証できません。さらに改善する必要があります。

3.2 .then() メソッドの特徴

前の .then() メソッドで新しい Promise インスタンスオブジェクトが返された場合、次の .then() メソッドで処理を続行できます。合格

.then() メソッドの連鎖呼び出しにより、コールバック地獄の問題が解決されます。

3.3 Promise に基づいてファイルの内容をシーケンシャルに読み取る

Promise は連鎖呼び出しをサポートして、コールバック地獄の問題を解決します。サンプルコードは次のとおりです。

import thenFs from 'then-fs'

thenFs
  .readFile('./files/11.txt', 'utf8') //返回值是 Promise 的实例对象
  .catch((err) => {
    console.log(err.message)
  })
  .then((r1) => {
    console.log(r1)
    return thenFs.readFile('./files/2.txt', 'utf8')
  })
  .then((r2) => {
    console.log(r2)
    return thenFs.readFile('./files/3.txt', 'utf8')
  })
  .then((r3) => {
    console.log(r3)
  })

3.4 .catch でエラーをキャッチする

Promise チェーン操作でエラーが発生した場合は、Promise.prototype.catch メソッドを使用してエラーをキャプチャして処理できます。

import thenFs from 'then-fs'

thenFs.readFile('./files/1.txt','utf8').then((r1)=>{
  console.log(r1)
  return thenFs.readFile('./files/22.txt','utf8')
  .catch( err =>{   //通过 catch 捕获错误。但是从这里往后就不会捕获了。
    console.log(err)
  })
}).then((r2)=>{
  console.log(r2)
  return thenFs.readFile('./files/3.txt','utf8')
}).then((r3)=>{
  console.log(r3)
})

//运行结果是 读取出 r1  r2打印undefined  r3
//如果把 catch 放到最后，则遇到错误以后爆错误，错误后面就不会再执行了
//在这里把 catch 放到最后，就能读取出 r1 ，然后就爆err了，r2 ，r3 都不会读取出来

前のエラーによって後続の .then が正常に実行されないようにしたくない場合は、事前に .catch を呼び出すことができます。

3.5 Promise.all() 方法

Promise.all() メソッドは並列 Promise 非同期操作を開始し、すべての非同期操作が完了した後に次のステップが実行されます。

操作 (待機メカニズム)。サンプルコードは次のとおりです。

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)
})
.catch(err=>{
  console.log(err)
})

注: 配列内の Promise インスタンスの順序は、最終結果の順序です!

3.6 Promise.race() 方法

Promise.race() メソッドは、並列 Promise 非同期操作を開始します。非同期操作が完了する限り、次のステップがすぐに実行されます。

それでは作動（レース機構）。

サンプルコードは次のとおりです。

import thenFs from 'then-fs'

const promiseArr = [
  thenFs.readFile('./files/3.txt', 'utf8'),
  thenFs.readFile('./files/2.txt', 'utf8'),
  thenFs.readFile('./files/1.txt', 'utf8'),
]

Promise.race(promiseArr).then(result => {
  console.log(result)
})

//最后就打印出一个，哪个读取快就打印哪个，读取出一个就立马停止后面的读取。
//有可能出r1 ，有可能出r3，不固定，谁快读取谁！

4. ファイルを読み取るための約束ベースのカプセル化方法

メソッドのカプセル化要件:

① メソッドの名前は getFile として定義する必要があります

② メソッドは、読み込むファイルのパスを示す仮パラメータ fpath を受け取ります。

③メソッドの戻り値はPromiseのインスタンスオブジェクト

4.1 getFile メソッドの基本定義

// 1.方法的名称为 getFile
// 2.方法接收一个形参 fpath, 表示要读取的文件的路径
function getFile(fpath) {
    //3.方法的返回值为 Promise 的实例对象
    return new Promise()
}

注: 5 行目の new Promise() は、正式な非同期操作を作成するだけです。

4.2 特定の非同期操作の作成

特定の非同期操作を作成する場合は、 new Promise() コンストラクター中に関数関数を渡す必要があり、特定の

非同期操作は関数 function 内で定義されます。

4.3 .then の 2 つの実パラメータを取得する

.then() で指定された成功および失敗のコールバック関数は、関数パラメーターで受け取ることができます。

4.4 解決および拒否のコールバック関数を呼び出す

Promise 非同期操作の結果は、resolve または reject コールバック関数を呼び出すことによって処理できます。

サンプルコードは次のとおりです。

import fs from 'fs'

function getFile(fpath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fpath, 'utf8', (err, dataStr) => {
      if (err) return reject(err)
      resolve(dataStr)
    })
  })
}

getFile('./files/11.txt')
  .then((r1) => {
    console.log(r1)
  })
  .catch((err) => console.log(err.message))

やっと

Xingyue フロントエンドブログhttps://xingyue.vercel.app/

個人のブログ、フロントエンドの学習ノートの記録、収集またはコメントを歓迎します。

vue3基础---Promise

約束

1.コールバック地獄

1.1 コールバック地獄の問題を解決する方法

1.2 Promiseの基本コンセプト

2. コールバック関数に基づいてファイルの内容をシーケンシャルに読み取る

3. then-fs に基づいてファイルの内容を読み取る

3.1 then-fs の基本的な使い方