JavaScript怎么使用Promise處理回調地獄與async?await修飾符

本篇內容主要講解“JavaScript怎么使用Promise處理回調地獄與async await修飾符”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript怎么使用Promise處理回調地獄與async await修飾符”吧!

Promise

Promise能夠處理異步程序。

回調地獄

JS中或node中，都大量的使用了回調函數進行異步操作，而異步操作什么時候返回結果是不可控的，如果我們希望幾個異步請求按照順序來執行，那么就需要將這些異步操作嵌套起來，嵌套的層數特別多，就會形成回調地獄 或者叫做 橫向金字塔。

案例：有a.txt、b.txt、c.txt三個文件，使用fs模板按照順序來讀取里面的內容，代碼：

// 將讀取的a、b、c里面的內容，按照順序輸出
const fs = require('fs');
// 讀取a文件
fs.readFile('./a.txt','utf-8',(err,data)=>{
    if(err) throw err;
    console.log(data);
    // 讀取b文件
    fs.readFile('./b.txt','utf-8',(err,data)=>{
       	if(err) throw err;
        console.log(data);
        // 讀取c文件
        fs.readFile('./c.txt','utf-8',(err,data)=>{
            if(err) throw err;
            console.log(data)
        })
    })
})

案例中，循環嵌套的代碼越來越多，這就是 地獄回調

Promise簡介

• Promise對象可以解決 回調地獄 的問題

• Promise是異步編程的一種解決方案，比傳統的解決方案（回調函數和事件）更合理更強大

• Promise可以理解為是一個容器，里面可以編寫異步程序的代碼

• 從語法上說，Promise是一個對象，使用的時候需要 new

Promise簡單使用

Promise是“承諾”的意思，實例中，它里面的異步操作就相當于一個承諾，而承諾就會有兩種結果，要么完成了承諾的內容，要么失敗。

所以，使用Promise，分為兩大部分，首先是有一個承諾（異步操作），然后再兌現結果。

第一部分：定義"承諾"

// 實例化一個Promise，表示定義一個容器，需要給它傳遞一個函數作為參數，而該函數又有兩個形參，通常用resolve和reject表示。該函數里面可以寫異步請求的代碼
// 換個角度，也可以理解為定下了一個承諾諾
let p = new Promise((resolve,reject)=>{
    // 形參resolve，單詞意思是 完成
    // 實參reject，單詞意思是 失敗
    fs.readFile('./a.txt','utf-8',(err,data)=>{
        if(err){
            // 失敗，就告訴別人，承諾失敗了
            reject(err);
        }else{
            // 成功，就告訴別人，承諾實現了
            resolve(data);
        }
    }
})

第二部分：獲取"承諾"的結果

// 通過調用 p 的then方法，可以獲取到上述 "承諾" 的結果
// then方法有兩個函數類型的參數，參數1表示承諾成功時調用的函數，參數2可選，表示承諾失敗時調用的函數
// p.then(
//	(data)=>{},  // 函數類型的參數，用于獲取承諾成功后的數據
//   (err)=>{}   // 函數類型的參數，用于承諾失敗后的錯誤信息
//)
p.then(
	(data)=>{
        console.log(data);
    },
    (err)=>{
        console.log(err);
    }
)

三種狀態

• 最初狀態：pending，等待中，此時的promise結果為undefined

• 當resolve (value) 調用時，達到最終狀態之一：fulfilled，（成功的）完成，此時可以獲取結果value

• 當reject (error) 調用時，達到最終狀態之一：rejected，失敗，此時可以獲取錯誤信息error

當達到最終的fulfilled 或 rejected 時，promise的狀態就不會再改變了。

特點

當調用 resolve的時候，Promise 將到達最終的狀態。 達到最終狀態之后，Promise的狀態就不會再改變了。

多次調用resolve函數，只有第一次有效，其他的調用都無效。

const fs = require('fs');
// 1.創建Promise對象：(承諾)
let p = new Promise((resolve,reject)=>{
    resolve(123);
    resolve(456);  // 這次的調用無效
});
// 2.獲取異步任務的結果
// p.then(函數1，[函數2]);
p.then(res =>{
    console.log(res);  // 123
},err =>{
    console.log(err);
})

then方法的鏈式調用

• 前一個then里面返回的字符串，會被下一個then方法接收到。但是沒有意義；

• 前一個then里面返回的Promise對象，并且調用resolve的時候傳遞了數據，數據會被下一個then接收到

• 前一個then里面如果沒有調用resolve，則后續的then不會接收到任何值

const fs = require('fs');
// promise 承諾
let p1 = new Promise((resolve, reject) => {
  fs.readFile('./a.txt', 'utf-8', (err, data) => {
    err ? reject(err) : resolve(data.length);
  });
});
let p2 = new Promise((resolve, reject) => {
  fs.readFile('./b.txt', 'utf-8', (err, data) => {
    err ? reject(err) : resolve(data.length);
  });
});
let p3 = new Promise((resolve, reject) => {
  fs.readFile('./c.txt', 'utf-8', (err, data) => {
    err ? reject(err) : resolve(data.length);
  });
});
p1.then(a => {
  console.log(a);
  return p2;
}).then(b => {
  console.log(b);  	// 接收上面傳遞的值p2
  return p3;
}).then(c => {
  console.log(c)   	// 接收上面傳遞的值p3
}).catch((err) => {
  console.log(err);   // 如果錯誤，打印報錯信息
});

catch方法可以統一獲取到 錯誤信息

封裝按順序異步讀取文件的函數

function myReadFile(path) {
    return new Promise((resolve, reject) => {
        fs.readFile(path, 'utf-8', (err, data) => {
            err ? reject(err) : resolve(data.length);
        })
    });
}
myReadFile('./a.txt')
.then(a => {
  console.log(a);
  return myReadFile('./b.txt');
})
.then(b => {
  console.log(b);
  return myReadFile('./c.txt');
})
.then(c => {
  console.log(c)
})
.catch((err) => {
  console.log(err);
});

使用第三方模塊讀取文件

• npm init - y

• npm i then-fs 安裝then-fs模塊

• then-fs 將 內置的fs模塊封裝了，讀取文件后，返回 Promise 對象，省去了我們自己封裝

// then-fs 模塊是第三方模塊，需要 npm install then-fs  下載安裝的
const fs = require('then-fs');
// then-fs 對內置的fs模塊進行了重寫的封裝。調用方法后，返回Promise對象
let p1 = fs.readFile('./files/a.txt', 'utf-8');  // 
let p2 = fs.readFile('./files/b.txt', 'utf-8');
let p3 = fs.readFile('./files/c.txt', 'utf-8');
// 通過then獲取結果
p1.then(res => {
  console.log(res.length);
  return p2;
}).then(res => {
  console.log(res.length);
  return p3;
}).then(res => {
  console.log(res.length);
})

async和await 修飾符

ES6 — ES2015

async 和 await 是 ES2017 中提出來的。

異步操作是 JavaScript 編程的麻煩事，麻煩到一直有人提出各種各樣的方案，試圖解決這個問題。

從最早的回調函數，到 Promise 對象，再到 Generator 函數，每次都有所改進，但又讓人覺得不徹底。它們都有額外的復雜性，都需要理解抽象的底層運行機制。

異步I/O不就是讀取一個文件嗎，干嘛要搞得這么復雜？異步編程的最高境界，就是根本不用關心它是不是異步。

async 函數就是隧道盡頭的亮光，很多人認為它是異步操作的終極解決方案。

ES2017 提供了async和await關鍵字。await和async關鍵詞能夠將異步請求的結果以返回值的方式返回給我們。

async 用于修飾一個 function

• async 修飾的函數，總是返回一個 Promise 對象

• 函數內的返回值，將自動包裝在 resolved 的 promise 中

await 只能出現在 async 函數內

• await 讓 JS 引擎等待直到promise完成并返回結果

• 語法：let value = await promise對象; // 要先等待promise對象執行完畢，才能得到結果

• 由于await需要等待promise執行完畢，所以await會暫停函數的執行，但不會影響其他同步任務

對于錯誤處理，可以選擇在async函數后面使用 .catch() 或 在promise對象后使用 .catch()

const fs = require('fs');
// 將異步讀取文件的代碼封裝
function myReadFile (path) {
    return new Promise((resolve, reject) => {
        fs.readFile(path, 'utf-8', (err, data) => {
            err ? reject(err) : resolve(data.length);
        });
    }).catch(err => {
        console.log(err);
    });
}
async function abc () {
    let a = await myReadFile('./a.txt');
    let b = await myReadFile('./b.txt');
    let c = await myReadFile('./c.txt');
    console.log(b);
    console.log(a);
    console.log(c);
}
abc();

錯誤處理

前提是得到幾個Promise對象，代碼如下：

let fs = require('fs');
let p1 = new Promise('./files/a.txt','utf-8');
let p2 = new Promise('./files/bbb.txt','utf-8');  // 注意：這里故意寫錯路徑
let p3 = new Promise('./files/c.txt','utf-8');

獲取Promise的結果，可以通過then獲取。也可以通過async和await獲取。

如果使用then獲取結果，那么錯誤如何處理？在鏈式調用的尾端，加一個catch方法即可

// ----------------------------通過 then 獲取結果-----------------------------
p1.then(res=>{
    console.log(res);
    return p2;
}).then(res=>{
    console.log(res);
    return p3
}).catch(err=>{
    console.log(err);
})

如何使用async和await獲取結果，最好的錯誤處理方案，就是使用 try...catch...

// ---------------------------通過 async/await 獲取結果--------------------
async function abc(){
    try{  // 嘗試做一些事情
        let r1 = await p1;  // 正常獲取結果
        let r2 = await p2;  // 這里出錯了，就會拋出錯誤 throw err.
        let r3 = await p3;
        console.log(r1,r2,r3)
    }catch(e){
        console.log(e);  // catch這里，會抓住前面try里面拋出的錯誤
    }
}
abc();

到此，相信大家對“JavaScript怎么使用Promise處理回調地獄與async await修飾符”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！