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()
範例：有一個圖片載入完就加入頁面，其餘的不管，只顯示最早載入完成的一張圖片
rrreee
26
#
發佈於
##
-
# - 【ES6入門12】：Promise
- #javascript############es6######################################################### #######前端###
閱讀 · 時所學。
-
0
#
#
#
{
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.代码复杂影响后期维护，很难一眼看出回调之间的顺序问题，代码难以阅读
}{
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一样，但是代码可读性、可维护性更高
}{
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
}{
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
}{
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);
}以上是ES6中Promise的基本用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
PHP與Vue：完美搭檔的前端開發利器
Mar 16, 2024 pm 12:09 PM
PHP與Vue：完美搭檔的前端開發利器在當今網路快速發展的時代，前端開發變得愈發重要。隨著使用者對網站和應用的體驗要求越來越高，前端開發人員需要使用更有效率和靈活的工具來創建響應式和互動式的介面。 PHP和Vue.js作為前端開發領域的兩個重要技術，搭配起來可以稱得上是完美的利器。本文將探討PHP和Vue的結合，以及詳細的程式碼範例，幫助讀者更好地理解和應用這兩
前端面試官常問的問題
Mar 19, 2024 pm 02:24 PM
在前端開發面試中，常見問題涵蓋廣泛，包括HTML/CSS基礎、JavaScript基礎、框架和函式庫、專案經驗、演算法和資料結構、效能最佳化、跨域請求、前端工程化、設計模式以及新技術和趨勢。面試官的問題旨在評估候選人的技術技能、專案經驗以及對行業趨勢的理解。因此，應試者應充分準備這些方面，以展現自己的能力和專業知識。
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
Django是前端還是後端？一探究竟！
Jan 19, 2024 am 08:37 AM
Django是一個由Python編寫的web應用框架，它強調快速開發和乾淨方法。儘管Django是web框架，但要回答Django是前端還是後端這個問題，需要深入理解前後端的概念。前端是指使用者直接和互動的介面，後端是指伺服器端的程序，他們透過HTTP協定進行資料的互動。在前端和後端分離的情況下，前後端程式可以獨立開發，分別實現業務邏輯和互動效果，資料的交
Go語言前端技術探秘：前端開發新視野
Mar 28, 2024 pm 01:06 PM
Go語言作為一種快速、高效的程式語言，在後端開發領域廣受歡迎。然而，很少有人將Go語言與前端開發聯繫起來。事實上，使用Go語言進行前端開發不僅可以提高效率，還能為開發者帶來全新的視野。本文將探討使用Go語言進行前端開發的可能性，並提供具體的程式碼範例，幫助讀者更了解這一領域。在傳統的前端開發中，通常會使用JavaScript、HTML和CSS來建立使用者介面
Golang與前端技術結合：探討Golang如何在前端領域發揮作用
Mar 19, 2024 pm 06:15 PM
Golang與前端技術結合：探討Golang如何在前端領域發揮作用，需要具體程式碼範例隨著互聯網和行動應用的快速發展，前端技術也愈發重要。而在這個領域中，Golang作為一門強大的後端程式語言，也可以發揮重要作用。本文將探討Golang如何與前端技術結合，以及透過具體的程式碼範例來展示其在前端領域的潛力。 Golang在前端領域的角色作為一門高效、簡潔且易於學習的
