<!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>
05-21 12:03