中文在线免费看视频_国产成人精品亚洲日本在线观看_亚洲精品第一综合99久久_国产亚洲精品日韩综合网

　　●async / await

　　上述我們已經把 promise 的基礎使用掌握了, 但是個人認為, promise 的鏈式調用仍然會有點小問題

　　就是在使用的時候, 過多的鏈式調用, 對于閱讀體驗來說, 仍然是有一點小問題, 不利于閱讀

　　所以我們可以 使用 ES6+ 新推出的 async與await, 使用我的異步代碼書寫的更像是同步代碼一樣

　　●注意: 需要配合的必須是 Promise

　　●async 關鍵字的用法:

　　○直接書寫在函數的前面即可, 表示該函數是一個異步函數

　　○意義: 表示在該函數內部可以使用 await 關鍵字

　　●await 關鍵字的用法:

　　○必須書寫在一個有 async 關鍵字的函數內

　　○await 后面等待的內容必須是一個 promise 對象

　　○本該使用 then 接受的結果, 可以直接定義變量接受了

　　●常規的 promise 調用方式

　　fn()

　　.then(function (res) {

　　console.log(res);

　　})

　　.catch(function (res) {

　　console.log(res);

　　});

　　●利用 async 和 await 關鍵字來使用

　　async function newFn() {

　　/**

　　* await 是等待的意思

　　*

　　* 在當前 fn 函數內, await 必須要等到后面的 Promise 結束以后, 才會繼續執行后續代碼

　　*/

　　const r1 = await fn();

　　console.log("第一次: ", r1);

　　const r2 = await fn();

　　console.log("第二次: ", r1);

　　const r3 = await fn();

　　console.log("第三次: ", r1);

　　}

　　newFn();

　　●async 和 await 語法的缺點

　　○await 只能捕獲到 Promise 成功的狀態

　　○如果失敗, 會報錯并且終止程序的繼續執行

　　async function newFu() {

　　const r1 = await fn();

　　console.log("失敗后, 提示用戶網絡錯誤"); // 如果失敗的話這行代碼并不會執行

　　}

　　newFu();

　　● 解決方法1: 使用 try...catch...

　　○語法: try { 執行代碼 } catch (err) { 執行的代碼 }

　　○首先執行 try 內部的代碼, 如果不報錯, catch 的代碼不執行了

　　○如果報錯, 不會爆出錯誤, 不會終止程序, 而是執行 catch 的代碼, 報錯信息在 catch 函數的形參內

　　async function newFu() {

　　try {

　　const r1 = await fn();

　　console.log(r1);

　　} catch (error) {

　　console.log("網絡錯誤, 請檢查網絡并重新請求");

　　}

　　}

　　newFu();

　　●解決方法2: 改變封裝的思路

　　○原因: 因為 promise 對象有成功和失敗的狀態, 所以會在失敗狀態是報錯

　　○解決: 封裝一個 百分比成功的 promise 對象, 讓成功和失敗的時候都按照 resolve 的形式來執行

　　○只不過傳遞出去的參數, 記錄一個表示成功或者失敗的信息

　　function fn() {

　　const p = new Promise(function (resolve, reject) {

　　const timer = Math.ceil(Math.random() * 3000) + 2000;

　　setTimeout(() => {

　　if (timer > 3500) {

　　resolve({ code: 0, msg: "班長買水失敗" });

　　} else {

　　resolve({ code: 1, msg: "班長買水成功" });

　　}

　　}, timer);

　　});

　　return p;

　　}

　　async function newFn() {

　　const r1 = await fn();

　　if (r1.code === 0) {

　　console.log("第一次請求失敗, 請檢查您的網絡信息");

　　} else {

　　console.log("第一次請求成功", r1.msg);

　　}

　　const r2 = await fn();

　　if (r2.code == 0) {

　　console.log("第二次請求失敗, 請檢查您的網絡信息");

　　} else {

　　console.log("第二次請求成功", r2.msg);

　　}

　　}

　　newFn();