JavaScript詳解使用Promise處理回調(diào)地獄的兩種方法

更新時間：2022年11月30日 10:59:04 作者：未及545

這篇文章主要介紹了JavaScript詳解使用Promise處理回調(diào)地獄的兩種方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、.then()鏈?zhǔn)秸{(diào)用解決

多層回調(diào)函數(shù)的相互嵌套，就形成了回調(diào)地獄。

缺點：

1.代碼耦合性太強(qiáng)，難以維護(hù)。

2.大量冗余的代碼相互嵌套，可讀性比較差。

then-fs的基本使用：

調(diào)用then-fs（終端通過npm install then-fs安裝包）提供的readFile（）方法，可以異步的讀取文件的內(nèi)容，它的返回值是Promise的實例對象，因此可以調(diào)用.then（）方法為每個Promise異步操作指定成功和失敗之后的回調(diào)函數(shù)。

import thenFs from "then-fs"
thenFs.readFile("./fis/1.txt","utf8").then(r1=>{
  console.log(r1);
})
thenFs.readFile("./fis/2.txt","utf8").then(r2=>{
  console.log(r2);
})
thenFs.readFile("./fis/3.txt","utf8").then(r3=>{
  console.log(r3);
})

但是會發(fā)現(xiàn)讀取順序是會變化的。

.then（）方法的特性：

如果上一個.then（）方法中返回了一個新的promise實例對象，則可以通過下一個.then（）繼續(xù)進(jìn)行處理，通過鏈?zhǔn)秸{(diào)用的方法，解決地獄回調(diào)問題。

import thenFs from "then-fs"
thenFs.readFile("./fis/1.txt","utf8").then(r1=>{
  console.log(r1);
  return thenFs.readFile("./fis/2.txt","utf8")
}).then(r2=>{
  console.log(r2);
  return thenFs.readFile("./fis/3.txt","utf8")
}).then(r3=>{
  console.log(r3);
})

.catch（）方法

import thenFs from "then-fs"
thenFs.readFile("./fis/11.txt","utf8").catch(err=>{
  console.log(err.message);
}).then(r1=>{
  console.log(r1);
  return thenFs.readFile("./fis/2.txt","utf8")
}).then(r2=>{
  console.log(r2);
  return thenFs.readFile("./fis/3.txt","utf8")
}).then(r3=>{
  console.log(r3);
})

.catch（）放到最后可以捕獲所有錯誤，但是一旦遇到錯誤，后面的.then（）就不在執(zhí)行。

.catch（）放到前面，后面的.then（）還可以正常執(zhí)行。

二、async await解決

import thenFs from "then-fs"
 async function getFile(){
// 不加await，打印的r1是一個promise實例對象，加await打印的是結(jié)果
const r1=await thenFs.readFile("./fis/1.txt","utf8")
console.log(r1);
const r2=await thenFs.readFile("./fis/2.txt","utf8")
console.log(r2);
const r3=await thenFs.readFile("./fis/3.txt","utf8")
console.log(r3);
 }
 getFile()

注意：

在async方法中，第一個await之前的代碼會同步執(zhí)行，await之后的代碼會異步執(zhí)行

import thenFs from "then-fs"
// 在async方法中，第一個await之前的代碼會同步執(zhí)行，await之后的代碼會異步執(zhí)行
console.log("a");
 async function getFile(){
  console.log("b");
const r1=await thenFs.readFile("./fis/1.txt","utf8")
console.log(r1);
const r2=await thenFs.readFile("./fis/2.txt","utf8")
console.log(r2);
const r3=await thenFs.readFile("./fis/3.txt","utf8")
console.log(r3);
console.log("d");
 }
 getFile()
 console.log("c");