科技知識動態：ES6中Promise的基本用法介紹

2021-05-19 20:16:54

導讀跟大家講解下有關ES6中Promise的基本用法介紹，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說ES6中Promise的基本用法介紹，

跟大家講解下有關ES6中Promise的基本用法介紹，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說ES6中Promise的基本用法介紹，小編也收集到了有關ES6中Promise的基本用法介紹的相關資料，希望大家看到了會喜歡。

本篇文章給大家帶來的內容是關于ES6中Promise的基本用法介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

Promise是一種異步編程的解決方案

1.es5的回調

{ let ajax = function (callback) { console.log('run1'); setTimeout(function () { callback && callback.call(); }, 1000); }; ajax(function () { console.log('timeout1'); }); // 結果：立馬輸出 run1，1秒之后輸出 timeout1 // 1.如果過程變得復雜，a()=>b()=>c()=>d()... ，用回調來處理會使代碼變得復雜 // 2.代碼復雜影響后期維護，很難一眼看出回調之間的順序問題，代碼難以閱讀}

2.es6的Promise

{ let ajax = function () { console.log('run2'); // 返回一個對象（Promise實例），這個實例具有then()方法，就是執行下一步的功能 return new Promise(function (resolve, reject) { // resolve表示執行下一步操作 reject表示中斷當前操作 setTimeout(function () { resolve(); }, 1000); }); }; ajax().then(function () { // 這個方法對應resolve console.log('timeout2'); }, function () { // 這個方法對應reject }); // 結果：立馬輸出 run2，1秒之后輸出 timeout2 // 結果和es5一樣，但是代碼可讀性、可維護性更高}

3.then()的串聯操作

{ let ajax = function () { console.log('run3'); return new Promise(function (resolve, reject) { setTimeout(function () { resolve(); }, 2000); }); }; ajax().then(function () { // 返回Promise實例，通過不斷的下一步下一步，實現了串聯操作的結果 return new Promise(function (resolve, reject) { setTimeout(function () { resolve(); }, 3000); }); }).then(function () { console.log('timeout3'); }); // 結果：立馬輸出 run3，5秒之后輸出 timeout3}

4.catch方法

{ let ajax = function (num) { console.log('run4'); return new Promise(function (resolve, reject) { if (num >= 5) { resolve(); } else { throw Error(`出錯了，${num}小于5`); } }); }; // catch方法用來捕獲異常 ajax(6).then(function () { console.log(6); }).catch(function (err) { console.log(err); }); // 結果：輸出 run4 6 ajax(3).then(function () { console.log(3); }).catch(function (err) { console.log(err); }); // 結果：輸出 run4 Error: 出錯了，3小于5}Promise.all()

例子：所有圖片加載完再統一添加到頁面

{ function loadImg(src) { return new Promise((resolve, reject) => { let img = document.createElement('img'); img.src = src; // onload監聽圖片加載完成 img.onload = function () { resolve(img); }; // onerror監聽圖片加載失敗 img.onerror = function (err) { reject(err); }; }); } function showImgs(imgs) { console.log(imgs); // [img, img, img] 三個img對象 imgs.forEach(function (img) { document.body.appendChild(img); }); } // Promise.all 把多個Promise實例當做一個Promise實例 // Promise.all(array).then(fn),array對應多個Promise實例，當所有實例狀態發生改變時，新的Promise實例才會跟著發生變化 // Promise.all也是返回Promise實例，所以也有.then()方法 // 當三張圖片都加載完成，才會執行showImgs，如果其中有圖片正在加載，不會執行showImgs，頁面上看不到任何一張圖片 Promise.all([ loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp'), loadImg('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp'), loadImg('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp') ]).then(showImgs);}Promise.race()

例子：有一個圖片加載完就添加到頁面，其余的不管，只顯示最先加載完成的一張圖片

專欄

超級有溫度的代碼

文章詳情