promise用法
- 2022 年 5 月 21 日
- 筆記
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”x-ua-compatible” content=”IE=edge” >
<title>promise</title>
</head>
<body>
<script>
// promise的優缺點
// 優點：
// 1.Promise 分離了非同步數據獲取和業務邏輯，有利於程式碼復用。
// 2.可以採用鏈式寫法
// 3.一旦 Promise 的值確定為fulfilled 或者 rejected 後，不可改變。
// 缺點：
// 程式碼冗餘，語義不清。
// ——————-
// 1.解決回調地獄
// 回調地獄：發送多個非同步請求時，每個請求之間相互都有關聯，會出現第一個請求成功後再做下一個請求的情況。我們這時候往往會用嵌套的方式來解決這種情況，但是這會形成」回調地獄「。如果處理的非同步請求越多，那麼回調嵌套的就越深。出現的問題：
// 1.程式碼邏輯順序與執行順序不一致，不利於閱讀與維護。
// 2.非同步操作順序變更時，需要大規模的程式碼重構。
// 3.回調函數基本都是匿名函數，bug追蹤困難。
// ——————–
// 2.解決非同步
// 我們都知道js是單執行緒執行程式碼，導致js的很多操作都是非同步執行（ajax）的，以下是解決非同步的幾種方式：
// 1.回調函數(定時器)。
// 2.事件監聽。
// 3.發布/訂閱。
// 4.Promise對象。(將執行程式碼和處理結果分開)
// 5.Generator。
// 6.ES7的async/await。
// Promise.all
function all(promises) {
let len = promises.length, res = []
if (len) {
return new Promise(function (resolve, reject) {
for(let i=0; i<len; i++) {
let promise = promises[i];
promise.then(response => {
res[i] = response
// 當返回結果為最後一個時
if (res.length === len) {
resolve(res)
}
}, error => {
reject(error)
})
}
})
}
}
// test
let p1 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(1)
// reject(new Error(‘error 1’))
}, 1000)
})
let p2 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(2)
}, 2000)
})
let p3 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(3)
}, 3000)
})
all([p1, p2, p3]).then(res => {
console.log(res) // [1, 2, 3]
}).catch(console.log)
</script>
</body>
